将前端代码打包成docker镜像

说明：主要是将前端代码文件打包到nginx容器中，制作为镜像，再在启动这个镜像时就可以直接访问到前端页面

 

1. 目录结构如下 

[root@dafeng data]# pwd
/data
[root@dafeng data]# ll
total 12
-rwxr-xr-x 1 root root  207 May  7 00:04 Dockerfile
-rwxr-xr-x 1 root root 2476 May  6 23:52 nginx.conf
drwxr-xr-x 6 root root 4096 May  6 11:17 si

2.修改nginx.conf文件

主要是修改了nginx的访问路径root

server {
        listen       80 default_server;
        listen       [::]:80 default_server;
        server_name  _;
        root         /usr/share/nginx/sisi/dist;

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

        location / {
        }

        error_page 404 /404.html;
            location = /40x.html {
        }

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

 

3.dockerfile示例

[root@dafeng data]# cat Dockerfile 
FROM nginx

RUN mkdir /usr/share/nginx/sisi

RUN mkdir /usr/share/nginx/sisi/dist

RUN rm -rf /etc/nginx/nginx.conf

COPY ./nginx.conf /etc/nginx/nginx.conf

COPY ./si  /usr/share/nginx/sisi/dist

EXPOSE 80

说明：首先在nginx容器中创建目录，拷贝自定义修改后的nginx.conf配置文件和前端代码文件夹si至root路径中

 

4.构建镜像

[root@dafeng data]# docker image build -t nginx-si-web .
# 最后的点要注意不要漏掉

 

5.运行镜像

[root@dafeng data]# docker run --name ss --rm  -p 80:80 nginx-si-web
106.52.52.39 - - [06/May/2020:16:04:43 +0000] "GET / HTTP/1.1" 200 20047 "-" "curl/7.29.0" "-"