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

将前端SPA应用部署到docker容器提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一、所需材料二、准备工作1.项目文件2.nginx配置3.Dockerfile三、打包镜像并启动容器总结前言如今容器化技术越来越流行,相信很多小伙伴都遇到过将前端SPA应用打包到docker中的需求。那么今天我们就来带着大家部署一遍一、所需材料1.项目文件dist2.nginx.conf(配置反向代理)3.Dockerfile(将项目打包成容器)二、准备工作1.项目文件npmrunbuild.

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

文章目录

  • 前言
  • 一、所需材料
  • 二、准备工作
    • 1.项目文件
    • 2.nginx配置
    • 3.Dockerfile
  • 三、打包镜像并启动容器
  • 总结

前言

如今容器化技术越来越流行,相信很多小伙伴都遇到过将前端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容器的教程,其中文件名、端口号可以根据自己的情况更改

今天的文章将前端SPA应用部署到docker容器分享到此就结束了,感谢您的阅读,如果确实帮到您,您可以动动手指转发给其他人。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/40123.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注