将前端SPA应用部署到docker容器

---

前言

如今容器化技术越来越流行，相信很多小伙伴都遇到过将前端SPA应用打包到docker中的需求。那么今天我们就来带着大家部署一遍

---

一、所需材料

1.项目文件 dist
2.nginx.conf (配置反向代理)
3.Dockerfile(将项目打包成容器)

二、准备工作

1.项目文件

npm run build

执行完毕后会生成dist文件夹（可改名）

2.nginx配置

创建nginx.conf文件夹

server {
    listen 80;

    # gzip config

​    gzip on;
​    gzip_min_length 1k;
​    gzip_comp_level 9;
​    gzip_types text/plain text/css text/javascript application/json application/javascript application/x-javascript application/xml;
​    gzip_vary on;
​    gzip_disable "MSIE [1-6]\.";

    root /usr/share/nginx/html;  #代码所在的文件夹
    
    # 为browser router准备的
    location / {
        try_files $uri $uri/ /index.html;
    }
    
    # 配置反向代理
    location  ~/web/ {
            proxy_pass http://xxx.xxx.xxx.xxx:10013;
        }
    location ~/api/ {
            proxy_pass http://xxx.xxx.xxx.xxx:8077;
        }

}

3.Dockerfile

FROM nginx
COPY ./dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80

三、打包镜像并启动容器

将dist文件夹、dockerfile文件、nginx.conf放在同一个目录下
然后执行生成镜像 和docker容器

docker build -t imageName .

docker run -it -p 1037:80 --name containerName imageId

访问 http://ip:1037 便可看到你的项目了

---

总结

以上是将前端spa项目部署到docker容器的教程，其中文件名、端口号可以根据自己的情况更改