Linux+Docker+Nginx部署dist，dis包部署，vue容器化部署

使用Docker部署Vue应用到Nginx

最新推荐文章于 2024-11-01 19:06:31 发布

原创最新推荐文章于 2024-11-01 19:06:31 发布 · 置顶 · 986 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#nginx #linux #docker

该文指导如何通过Docker安装Nginx，使用Vue执行npmrunbuild打包应用，然后将dist包放入Dockerfile指定目录，并创建自定义Nginx配置模板，最后在Linux环境中构建和运行Docker镜像以发布应用。

1、docker安装nginx

docker pull nginx

2、vue执行打包命令打dist包

npm run build

3、将dist包放置发布目录
4、发布目录创建Dockerfile文件（与dist文件夹同级）

FROM nginx:latest
 
#将配置文件复制到Nginx指定文件夹下
COPY ./dist /dist
COPY ./nginx.conf.template /
#构建自定义环境变量
CMD envsubst < /nginx.conf.template > /etc/nginx/nginx.conf \
	&& cat /etc/nginx/nginx.conf \
	&& nginx -g 'daemon off;'

5、同级创建nginx.conf.template文件（与dist文件夹同级）

user nginx;
 
worker_processes  1;
 
events {
    worker_connections  1024;
}
 
 
http {
    include       mime.types;
    default_type  application/octet-stream;
 
    sendfile        on;
	#超时时间
    keepalive_timeout  65;
 
    server {
		#监听端口
        listen       80;
		#服务名，可通过此名称访问页面
        server_name  localhost;
 
        location / {
            root   /dist;
			#设置访问端口首页
            index  index.html index.htm;
        }
		#设置报错跳转页面，不需要可注释或删掉
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}