docker部署vue项目记录

• 准备

环境：centos

开发工具: visual studio code

---

1. Nginx配置文件default.conf的编写

在项目的根目录下添加如下文件(与src目录同级)

 

[root@node2 dockertest]# cat default.conf 
server {
    listen       8080;
    server_name  localhost; # docker容器的ip
 
    location /zqhr {
        proxy_pass https://z***z.j********t.com.cn;#服务转发
    }

    location / {
        root   /usr/share/nginx/html;#后面dist复制的目标目录
        index  index.html index.htm;
        try_files $uri $uri/ /index.html =404;
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }
}

     2.编写DockerFile

[root@node2 dockertest]# cat Dockerfile 
FROM nginx    #使用nginx

MAINTAINER otwayalways

RUN rm /etc/nginx/conf.d/default.conf #移除docker nginx原来的配置文件

ADD default.conf /etc/nginx/conf.d/    #将新的配置文件添加进去

COPY dist/ /usr/share/nginx/html/    #将npm run build生成的dist文件复制到/usr/share/nginx/html/

      3.现在可以build镜像了，build成功后，运行即可

[root@node2 dockertest]# docker build -t distpublisher .
Sending build context to Docker daemon  3.401MB
Step 1/5 : FROM nginx
 ---> 992e3b7be046
Step 2/5 : MAINTAINER otwayalways
 ---> Running in be6482547359
Removing intermediate container be6482547359
 ---> 858d4669f7af
Step 3/5 : RUN rm /etc/nginx/conf.d/default.conf
 ---> Running in 3552987740b3
Removing intermediate container 3552987740b3
 ---> d90cafdeb005
Step 4/5 : ADD default.conf /etc/nginx/conf.d/
 ---> fd4989be78ae
Step 5/5 : COPY dist/ /usr/share/nginx/html/
 ---> f64b45b36fdf
Successfully built f64b45b36fdf
Successfully tagged distpublisher:latest

可以看到刚才build的镜像，接下来docker run一下：

docker run --name distpublisher -p 9090:8080 -d distpublisher
###############将本机的9090端口映射到docker的8080端口（这里的80端口就是上面default.conf里面监听的8080端口）

启动成功后