Linux环境 使用Docker部署Vue项目

#拉取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

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 #后台接口地址

}

}

生成镜像

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

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; #后台接口地址
}

}

#基于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