Vue Docker部署--Dockerfile书写

最新推荐文章于 2025-06-26 13:49:26 发布

原创

最新推荐文章于 2025-06-26 13:49:26 发布 · 8.6k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#Docker #Vue.js #Dockerfile #Nginx

本文介绍了如何使用Dockerfile将Vue.js项目部署到Docker容器中，通过设置Nginx配置文件中的proxy_pass为环境变量来解决无法预知后台IP的问题。在Docker构建过程中，可以指定环境变量为后台服务器的IP地址，实现灵活的部署策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前一阵有一个项目是采用Vue.js作为前端技术栈开发的，在实际部署的时候采用的是Webpack打包，然后用Nginx作为代理服务器，然后采用Daocloud平台，将其作为Docker容器部署。

由于后台也是采用Docker部署，所以我们并不知道后台的IP地址，没有办法采用常见的将自己定义的Nginx配置文件default.conf替换默认文件，常见方式的实现是：

RUN rm /etc/nginx/conf.d/default.conf //删除nginx 默认配置

ADD default.conf /etc/nginx/conf.d/ //添加自己的配置 default.conf 在下面

COPY dist/  /usr/share/nginx/html/

我采用的解决方式是将Nginx配置文件中的proxy_pass 的值设为自定义的环境变量{HOST_IP}（可自定义变量名），这样在生成Vue Docker时可以定义环境变量为后台的IP地址，就解决了未知后台地址的Vue Docker搭建。

Nginx的配置文件如下

server {
    listen       9000;
    server_name  localhost;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }
    
    #change
    location /api/ {
      proxy_pass ${HOST_IP};
    }


    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {