Docker部署Vue项目

Posted 2022-12-09 pcdd

1 编写nginx.conf

worker_processes auto;
events 
    worker_connections 1024;

http 
 include             mime.types;
 default_type        application/octet-stream;
 sendfile            on;
 keepalive_timeout 65;
 client_max_body_size 20m;
 ###### blogapp begin #######
    server 
        listen       80;
        server_name  ip 或 域名;
        location / 
			root /usr/share/nginx/html; #配置Vue项目根路径,与
			index index.html index.html; #配置首页
			try_files $uri $uri/ /index.html; #防止刷新报404
        
        #error_page 404 /404.html;
            #location = /40x.html 
        #
        error_page 500 502 503 504 /50x.html;
            location = /50x.html 
			root html;
        
    
	
  ###### blogapp end #######
 

2 执行npm run build命令，将生成的dist目录上传至服务器，和Dockerfile在同一路径下即可

3 编写Dockerfile

# 标准的nginx镜像,我们需要基于标准的nginx镜像制作自己的镜像
FROM nginx 

# 拷贝当前目录的文件到指定文件夹下，改文件夹为镜像中的文件夹
COPY dist/ /usr/share/nginx/html/

# 拷贝.conf文件到镜像下，替换掉原有的nginx.conf
COPY nginx.conf /etc/nginx/nginx.conf

# 输出完成
RUN echo 'finish!' 

4 构建镜像，略，见Docker常用命令

5 启动容器，略，见Docker常用命令