docker部署vue项目记录

- 日理万妓 2022-12-13 04:06 155阅读 0赞

*  # 准备 #

环境：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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW5nc2hpbmVuZw_size_16_color_FFFFFF_t_70][]

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

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

启动成功后

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW5nc2hpbmVuZw_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW5nc2hpbmVuZw_size_16_color_FFFFFF_t_70]: /images/20221123/717057cd027f4580a1cb9e192c78035b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW5nc2hpbmVuZw_size_16_color_FFFFFF_t_70 1]: /images/20221123/42ced9e004504e709a477d680957d752.png