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文件的配置

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值