部署vue项目--docker环境

最新推荐文章于 2024-05-30 11:18:27 发布

来来好处

最新推荐文章于 2024-05-30 11:18:27 发布

阅读量318

点赞数

文章标签： nginx 前端运维

本文链接：https://blog.csdn.net/u011146219/article/details/129089825

版权

1、安装docker

这个网上有的是，可以参考Linux安装Docker完整教程_zrer.的博客-CSDN博客_linux安装docker

2、本地打包vue项目即dist文件夹

打包vue项目请参考手把手教你如何Vue项目打包dist文件并Tomcat发布【超级详细】_bug菌¹的博客-CSDN博客_vue打dist包

2、找到合适自己的文件夹

cd /opt/mylove

3 第二步创建文件夹后进入

mkdir frontend-docker

cd frontend-docker

4、创建nginx.conf.template并编辑好保存

vi nginx.conf.template #打开编辑贴上下面的文件内容再按 esc 然后 : wq保存

user nginx;
 
#user  nobody;
worker_processes  1;
 
#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;
 
#pid        logs/nginx.pid;
 
 
events {
    worker_connections  1024;
}
 
 
http {
    include       mime.types;
    default_type  application/octet-stream;
 
    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';
 
    #access_log  logs/access.log  main;
 
    sendfile        on;
    #tcp_nopush     on;
 
    #keepalive_timeout  0;
    keepalive_timeout  65;
 
    #gzip  on;
 
    server {
        listen       80;
        server_name  localhost;
 
        #charset koi8-r;
 
        #access_log  logs/host.access.log  main;
 
        location / {
            root   /dist;
            #try_files $uri /index.html; #解决路由重定向跳转 404 页面配置
            index  index.html index.htm;
        }
 
        #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 {
            root   html;
        }
    }
 
}

5 、创建Dockerfile文件并编辑好保存

vi Dockerfile #打开编辑贴上下面的文件内容再按 esc 然后 : wq保存

FROM nginx:latest
 
RUN mkdir /dist
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;'