Docker部署Vue项目

1.编辑 Dockerfile镜像内容

#拉取nginx镜像
FROM nginx:latest

#将dist文件中的内容复制到 /usr/share/nginx/html/ 这个目录下面
COPY dist/ /usr/share/nginx/html/

#用本地的 nginx.conf 配置来替换nginx镜像里的默认配置
COPY default.conf /etc/nginx/conf.d/default.conf

1.同级目录下创建nginx的配置文件default.conf

server {
    listen   80; # 监听的端口
    server_name  xx.xx.xxx.xx; # 处理的host地址 （请替换成你对应的项目访问 ip 或 域名）!!!
    root    /usr/share/nginx/html; # vue项目存在的目录（替换成你对应的地址，如果你这是用docker部署的请改成你容器内的地址）
    location / {
        try_files $uri $uri/ @router;#需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
        index  index.html index.htm;
    }
    #对应上面的@router，主要原因是路由的路径资源并不是一个真实的路径，所以无法找到具体的文件
    #因此需要rewrite到index.html中，然后交给路由在处理请求资源（不配置该项会导致直接访问路由报404）
    location @router {
        rewrite ^.*$ /index.html last;
    }
    # ^/api的值要对象项目中配置的代理vue.config.js文件中的^/api（不配置该项 请求后台路径就会报404或405）
    location ^~/api/ {        
        rewrite ^/api/(.*)$ /$1 break;        
        proxy_set_header   Host             $host;        
        proxy_set_header   x-forwarded-for  $remote_addr;        
        proxy_set_header   X-Real-IP        $remote_addr;        
        proxy_pass http://127.0.0.1:3000; #后台接口地址
    }
}

3.将项目打包成dist放入同级目录

4.执行如下命令

生成镜像
docker build -f Dockerfile -t toy-vue:v1.01 .

启动
docker run --privileged=true --name=toy-vue -d -p 80:80 -v /opt:/opt toy-vue:v1.01

5.docker部署vue实现https访问

a:复制认证秘钥到服务器 两个文件

   jellysat.cn.key

   jellysat.cn_bundle.pem

b:default.conf修改如下配置

server {
    listen   80; # 监听的端口
    server_name  xx.xx.xxx.xx; # 域名地址
    
    ssl_certificate /etc/nginx/jellysat.cn_bundle.pem;#主要配置:秘钥路径
    ssl_certificate_key /etc/nginx/jellysat.cn.key;#主要配置:秘钥路径
    ssl_session_timeout 5m;
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ssl_prefer_server_ciphers on;
    
    root    /usr/share/nginx/html; # vue项目存在的目录（替换成你对应的地址，如果你这是用docker部署的请改成你容器内的地址）
    location / {
        try_files $uri $uri/ @router;#需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
        index  index.html index.htm;
    }
    #对应上面的@router，主要原因是路由的路径资源并不是一个真实的路径，所以无法找到具体的文件
    #因此需要rewrite到index.html中，然后交给路由在处理请求资源（不配置该项会导致直接访问路由报404）
    location @router {
        rewrite ^.*$ /index.html last;
    }
    # ^/api的值要对象项目中配置的代理vue.config.js文件中的^/api（不配置该项 请求后台路径就会报404或405）
    location ^~/api/ {        
        rewrite ^/api/(.*)$ /$1 break;        
        proxy_set_header   Host             $host;        
        proxy_set_header   x-forwarded-for  $remote_addr;        
        proxy_set_header   X-Real-IP        $remote_addr;        
        proxy_pass http://127.0.0.1:3000; #后台接口地址
    }
}

c:编辑 Dockerfile镜像内容

#基于nginx镜像
FROM nginx:latest

#将dist文件中的内容复制到 /usr/share/nginx/html/ 这个目录下面
COPY dist/ /usr/share/nginx/html/

#用本地的 nginx.conf 配置来替换nginx镜像里的默认配置
COPY default.conf /etc/nginx/conf.d/default.conf

#将本地文件秘钥拷进nginx
COPY jellysat.cn.key  /etc/nginx/jellysat.cn.key
COPY jellysat.cn_bundle.pem  /etc/nginx/jellysat.cn_bundle.pem

遇到的问题

1.无法通过路由请求页面，报nginx404，参考default.conf文件的配置

2.请求后台接口报404，请求的地址ip和端口是vue项目的ip端口，需要做配置，参考default.conf文件的配置