nginx转发docker部署的vue项目

nginx转发 docker部署的vue项目

       上一篇跟大家分享了自动化部署vue项目,最终我们是服务器8083端口映射我们vue项目容器80端口,今天跟大家分享如何通过服务器的Nginx去转发我们的这个vue项目,同时针对我们的vue项目路由使用history模式,如何做修改。如果我们的vue项目路由使用history模式的话,访问其他页面会一直跳到首页,这时候需要针对镜像的nginx配置进行修改,修改如下

       一、新增nginx配置文件

       我们在vue项目下新增default.conf文件,配置如下

server {
    listen       80;
    server_name  localhost;

    location / {
        try_files $uri $uri/ /index.html;
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

       二、修改Dockerfile镜像打包文件

       我们修改vue项目下Dockerfile文件,我们将上一步nginx配置文件映射到nginx镜像配置文件,配置如下

FROM nginx:1.15-alpine
COPY ./dist /usr/share/nginx/html
COPY default.conf /etc/nginx/conf.d/default.conf

到这一步,我们就实现了vue项目路由使用history模式下,nginx访问

       三、服务器nginx转发docker部署的vue项目

       我是通过服务器安装的nginx进行docker部署的vue项目,修改服务器的nginx配置文件,新增这一段配置

server {
      listen 80;
      server_name  vue.test.cn;

      location / {
         proxy_set_header  X-Real-IP  $remote_addr;
         proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
         proxy_set_header Host $http_host;
         proxy_redirect off;
         proxy_pass http://127.0.0.1:8083;
      }
    }

添加完成后热加载nginx

 nginx -s reload

       然后我们就可以通过vue.test.cn进行访问我们的vue项目。

0条评论

发表评论