前端打包文件在 nginx 上 403 的解决办法

下面我们需要修复文件权限,使得所有文件是 644 权限,而所有文件夹是 755 权限。一个一个设置太麻烦了,可以使用 find 命令加上文件类型判断,来进行批量操作。

vue2项目中的配置

  • 在webpack配置里主要还是config/index.jsassetsPublicPath的设置
  //config/index.js
  module.exports = {
  build: {
    testEnv: require('./test.env'),
    prodEnv: require('./prod.env'),
    index: path.resolve(__dirname, '../dist/index.html'),
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/leo-face/',    //配置的是nginx下根目录新建的一个leo-face文件夹
    productionSourceMap: true,
    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],
    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    bundleAnalyzerReport: process.env.npm_config_report
  },
  dev: {
    env: require('./dev.env'),
    port: 8089,
    autoOpenBrowser: true,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {},
    // CSS Sourcemaps off by default because relative paths are "buggy"
    // with this option, according to the CSS-Loader README
    // (https://github.com/webpack/css-loader#sourcemaps)
    // In our experience, they generally work as expected,
    // just be aware of this issue when enabling this option.
    cssSourceMap: false
  }
}

注意: 项目是用vue-cli脚手架搭建的,就有这个config目录

  • 构建的配置路径弄好了.就要执行相应的命令了
npm run build:test
  • 附上packagejsonscript的命令
"build:test": "cross-env NODE_ENV=testing npm_config_preview=true  npm_config_report=true node build/build.js",
  • vue-cli生成的模板是没有这个命令的,这是我自己自定义的命令.首先会找到build/build.js读取相应配置,读取的还是webpack.prod.conf.js这个配置,但是我在这个webpack profile中做了一些修改
 // 调用方法,判断引入的后端接口地址
//这样一来,引入的就上面build.js对象中的testEnv的配置了
 var env = process.env.NODE_ENV === 'testing'
  ? config.build.testEnv
  : config.build.prodEnv

//plugins的HtmlWebpackPlugin修改
 new HtmlWebpackPlugin({
      filename: process.env.NODE_ENV === 'testing'
        ? 'index.html'
        : config.build.index,
      template: 'index.html',
      favicon: resolveApp('leo-face.ico'),
      inject: true,
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeRedundantAttributes: true,
        useShortDoctype: true,
        removeEmptyAttributes: true,
        removeStyleLinkTypeAttributes: true,
        keepClosingSlash: true,
        minifyJS: true,
        minifyCSS: true,
        minifyURLs: true
      },
      path: config.build.assetsPublicPath   config.build.assetsSubDirectory,
      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
      chunksSortMode: 'dependency'
    }),

//下面是test.env.js的配置
var merge = require('webpack-merge')
var devEnv = require('./dev.env')

module.exports = merge(devEnv, {
  NODE_ENV: '"testing"',
  BASE_API: '"https://testx.xxx.net/leo"',   //整个应用后端请求的地址
}) 
  • 打包环境配置好了,包也打好了生成的目录就是这样的,下图

WX20170830-222558@2x.png

  • 现在还不能直接去折腾nginx,因为还有个重要的设置没有更改,如果你的项目中使用的vue-router,想部署上服务器有优雅的路径,那么现在就需要设置你的router对象属性了
//创建路由
export default new Router({
  mode:'history',  
  base: '/leo-face/',
  routes: constantRouterMap
});

参数我就不说明了,百度,官方一堆介绍

  • 好了下面可以去折腾一下nginx了,由于我在本地已经搭建过nginx,也没有问题,所以就直接上服务器折腾.

图片 1

发布

  • 配置全部都完成了,接下来就是关键的点了.发布你的前端应用,记得前面打包好的文件了吧.
    • 在nginx负载转发出去的应用服务器上(文章中是213,214俩台服务器)的nginx/html目录下新建一个leo-face目录.把文件拷贝进去.
    • 现在你的访问目录就应该像这样https://test.xxx.net/leo-face
    • 启动nginx或者重启nginx,nginx -s reload
  • 新建文件夹的名称是因为之前打包时webpack中配置了assetsPublicPath的路径就是这个名字,所以在index.html引入的js,css地址前缀也会带这个名称
  • 好了,现在访问一下看看,OK~ 完美...

https main.png

这次遇到的问题是我下载了别人的一个代码压缩包,是一个 vue.js webpack 的项目,构建好后上传服务器,可以保证的是服务器上的 nginx 配置完全正确,但是在浏览器上怎么访问都是 403 forbidden 。

以上内容就是这个前端的单页应用发布测试环境的所有步骤了.但是发布正式环境可能还不是完全一致

find 命令的用法请参考 man 手册。

Nginx 相关配置

  • 服务器是linux的,和mac的差别不大.但是因为我是用homebrew装的nginx,只是目录有点不一样而已,附上自己三脚猫的画图功夫的流程图.

image.png

仔细观察项目结构与文件权限,发现项目下所有文件都是 755 的权限,所有文件夹都是 700 的权限,构建出来的文件也同样继承了这样的权限,导致 nginx 无法访问文件。详细原理请参考 linux 文件权限和 nginx 文档。

会遇到的问题

  • nginx入口服务器 配置相同域名多个访问路径时.是有匹配规则的,比如我把leo-face放在leo下就不能访问到/leo-face这个地址了
  • 如按照文章中的顺序无法接入成功,则 先可以配置基于http单点应用服务器的nginx是否可以正常访问前端应用.后面再将https入口服务接入负载转发到应用服务器上

这样,我们再次在浏览器访问服务端地址,就可以正常访问了。

https域名入口服务器的nginx.conf配置,这台服务器是215

  • linux上的nginx/config目录nginx.conf配置
    //后端服务负载策略
    upstream leo {
        server   xxx.xxx.xxx.213:8424 weight=1;
        server   xxx.xxx.xxx.214:8424 weight=1;
    }
  //前端负载策略
    upstream leo-face {
        server   xxx.xxx.xxx.213:443 weight=1;
        server   xxx.xxx.xxx.214:443 weight=1;
    }

 //server配置
  server {
        listen       443;
        server_name  testx.xxx.net;

        ssl on;

        ssl_certificate      "name.pem"
        ssl_certificate_key  "name.key";

        ssl_session_cache    shared:SSL:10m;
        ssl_session_timeout  10m;
        ssl_protocols  TLSv1 TLSv1.1 TLSv1.2;

        ssl_ciphers  HIGH:!RC4:!MD5:!aNULL:!eNULL:!NULL:!DH:!EDH:!EXP: MEDIUM;
        ssl_prefer_server_ciphers  on;

        location ~ /leo-face {
            access_log logs/leo-faceacc.log main;
            error_log logs/leo-face.log warn;
            proxy_pass https://leo-face;
            proxy_redirect          off;
            proxy_set_header        Host            $host:443;
            proxy_set_header        X-Real-IP       $remote_addr;
            proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_connect_timeout   180;
            proxy_send_timeout      180;
            proxy_read_timeout      180;
            proxy_buffer_size       128k;
            proxy_buffers           4 128k;
            proxy_busy_buffers_size 128k;
            proxy_temp_file_write_size 128k;
            add_header  Nginx-Cache "$upstream_cache_status";
        }

        location ~ /leo {
            access_log logs/leoacc.log main;
            error_log logs/leo.log warn;
            proxy_pass https://leo;
            proxy_redirect          off;
            proxy_set_header        Host            $host:443;
            proxy_set_header        X-Real-IP       $remote_addr;
            proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_connect_timeout   180;
            proxy_send_timeout      180;
            proxy_read_timeout      180;
            proxy_buffer_size       128k;
            proxy_buffers           4 128k;
            proxy_busy_buffers_size 128k;
            proxy_temp_file_write_size 128k;
            add_header  Nginx-Cache "$upstream_cache_status";
        }
    }

重启nginx服务器访问测试nginx的https是否开启

这里也有一个链接描述了这个问题:403 Forbidden Error and How to Fix it | Nginx Tips

转发服务器nginx.conf的配置

server {
    listen       443;
    server_name  xxx.xxx.xxx.213;

    location /leo-face {
        try_files $uri $uri/ /leo-face/index.html;   
        root   /opt/nginx/html;
        index  index.html index.htm;
    }

    ssl on;

    ssl_certificate      "name.pem"  
    ssl_certificate_key  "name.key";

    ssl_session_cache    shared:SSL:10m;
    ssl_session_timeout  10m;
    ssl_protocols  TLSv1 TLSv1.1 TLSv1.2;

    ssl_ciphers  HIGH:!RC4:!MD5:!aNULL:!eNULL:!NULL:!DH:!EDH:!EXP: MEDIUM;
    ssl_prefer_server_ciphers  on;

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }
}

相关说明:

  • 213 服务器的证书可以从入口服务器215上面拷贝一份过来,保持一致,ssl配置也可以拷贝
  • try_files $uri $uri/ /leo-face/index.html;由于页面是由js内部进行加载的,匹配当前url的所有地址,没有页面重定向到index.html. 官方说明
  • 有人觉得我后台服务为什么没有配置ssl? 上图已经声明了,后端springboot微服务使用的是consul这个分布式服务发现和共享配置的解决方案,在应用启动时读取了consul配置中心开启的springboot应用内置tomcat容器的ssl配置..并且证书放在应用包中.

(如图左为正常创建的文件权限,右为异常权限)

前言

公司新项目是使用springboot作为后端的微服务,前端就让我自己捣鼓用现在比较火的vue来做的分离前端,边学边做折腾了一个月,项目也差不多了完成了一个功能,准备发布下测试环境了,但是问题来了.服务器上的后端服务是接入了cas中央认证服务的单点登录的(cas接单页应用真的很费劲啊,有时间就写下来).所以是基于https的,所以和同事商量,那就使用nginx大法搭建一个全站https吧

# 更改文件夹权限
find . -type d -exec chmod 755 {} ;
# 更改普通文件权限
find . -type f -exec chmod 644 {} ;

本文基于图片 2知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议发布,欢迎引用、转载或演绎,但是必须保留本文的署名BlackStorm以及本文链接,且未经许可不能用于商业目的。如有疑问或授权协商请与我联系。

我们知道,前端有很多方便的构建和打包工具,如 webpack 等,通常我们会把前端文件打包到dist目录下,部署到服务器上,如 nginx 等。

遇到的问题表现出来就是如题所述,因此作为题目。

本文由上海时时乐走势图发布于上海时时乐走势图,转载请注明出处:前端打包文件在 nginx 上 403 的解决办法

您可能还会对下面的文章感兴趣: