docker部署nginx+vue项目

1.vue项目打包

npm run build

会在项目生成dist文件夹，这个文件夹可以使用nginx或tomcat来发布服务

2.查找nginx基础镜像

可以通过以下网站找到符合自己的基础镜像，我们等会儿会在基础镜像基础上构建自己的镜像。

https://hub.docker.com/

 

3.配置nginx

在项目根目录下创建nginx文件夹，该文件夹下新建文件default.conf（镜像里的配置文件为default.conf，自己安装的window或linux版配置文件为nginx.conf）

server {
    listen       80;
    server_name  localhost;

    #charset koi8-r;
    access_log  /var/log/nginx/host.access.log  main;
    error_log  /var/log/nginx/error.log  error;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

4.编写Dockerfile文件

在项目根目录创建Dockerfile文件

# 设置基础镜像
FROM nginx:1.16.1-alpine
# 将dist文件中的内容复制到 /usr/share/nginx/html/ 这个目录下面
COPY dist/  /usr/share/nginx/html/
#用本地的 default.conf 配置来替换nginx镜像里的默认配置
COPY nginx/default.conf /etc/nginx/conf.d/default.conf

 

5. 构建镜像

docker build -t test-vue-0.0.1 .

 

6.启动容器

docker run -d --name test-vue -p 9005:80 test-vue-0.0.1

 

可以在浏览器访问了