nuxt.js项目部署到linux服务器，并使用域名访问（说明遇上的大坑，首页静态资源可以访问，但是接口全部失效）

1.背景

如今ssr是非常流行的，而vue使用的ssr正是nuxt.js，由于nuxt.js和普通的vue项目不同，它是有自带的服务器的，所以部署到linux的方式也和vue单页面应用不同

2.步骤

2.1 准备源代码

一般我都是直接把源码中的除了node_modules的所有文件全部打包成一个zip压缩包，然后上传到服务器，由于node_modules文件夹里面是第三方包，很大，压缩起来很慢，上传到服务器也会很慢，所以一般都是在服务器端去npm install第三方包。

2.2 服务器安装node和pm2

2.2.1 安装node

参考博客：https://www.cnblogs.com/liuqi/p/6483317.html，步骤很详细

2.2.2 安装cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org
测试一下：cnpm -v
如果报错cnpm command not found什么的，那么你应该是没有对cnpm建立软连接，按照2.2.1建立以下

2.2.3 安装pm2

//安装pm2
npm install -g pm2
//建立软连接：
ln -s /usr/local/nodeJs/nodejs/bin/pm2 /usr/local/bin/pm2
//检测pm2命令
pm2 list

2.3 进入对应目录下载第三方依赖包

cnpm run install

2.4 编译项目

有两种方式，第一种是在你本地就npm run build然后按2.1的方式打包，也可以先将压缩包上传到服务器，再
npm run build

2.5 使用pm2启动项目

2.5.1 进入文件夹

我是将文件放在/usr/local/workspace/shop 目录下的，所以执行命令
cd /usr/local/workspace/shop
这一步非常重要，因为你就算是执行pm2命令，他也是从你当前文件夹的位置执行命令，而npm run start命令必须要在有package.json文件的目录下才能执行成功，所以必须先进入该目录，其实步骤2.3就已经要进入该文件夹进行操作了

2.5.2 启动项目

有两种方式

• 第一种就是直接在当前目录执行
  npm run start
• 第二种使用pm2启动项目
  pm2 start --name 'blog-nuxt' npm -- run start
  第一种虽然很快捷，但是这种启动方式对于项目的管理是很难的，所以一般使用第二种，使用pm2来进行项目的管理，启动，停止等，且pm2可管理多个项目，就很方便。

2.6 开启端口

到目前为止，项目已经正常启动了，为了能再浏览器直接访问，你还需要开启3000端口（nuxt默认是使用3000端口，如果你自定义了，那就开启你自定义的端口），开启步骤：
1.开启安全组，如阿里云的服务器，就在阿里云的控制台去开启3000安全组端口.
2.开启服务器的端口,并保存端口规则

iptables -A INPUT -ptcp --dport  端口号 -j ACCEPT
service iptables save 

2.7 访问

使用ip地址+端口的方式访问，只要访问成功，说明你的项目就已经成功部署了，

3 使用域名访问

3.1 解析一个域名

我是使用的阿里云的域名解析服务
在控制台搜索域名，然后选择域名服务

在对应的域名后面点击解析（如果你没域名，当我没说）

添加记录

解析完成后，等待几分钟，然后ping一下这个域名是否连通

3.2 使用nginx作反向代理

server {
  listen 8082;
  server_name test.rewa.tech;
  access_log /data/wwwlogs/test.rewa.tech_nginx.log combined;
  index index.html index.htm index.jsp;
  #root /data/wwwroot/test.rewa.tech;
  #root /usr/local/workspace/shop;

  #error_page 404 /404.html;
  #error_page 502 /502.html;

  location ~ .*\.(gif|jpg|jpeg|png|bmp|swf|flv|mp4|ico)$ {
    expires 30d;
    access_log off;
    proxy_pass http://127.0.0.1:3000;
  }
  location ~ .*\.(js|css)?$ {
    expires 7d;
    access_log off;
    proxy_pass http://127.0.0.1:3000;
  }
  location ~ /\.ht {
    deny all;
  }

  location ~ {
    proxy_pass http://127.0.0.1:3000;
  }

我这里是用的oneinstack安装的nginx，所以这是它自己生成的nginx配置文件，然后修改了一点配置，你们自己配置时，其实也是差不多的。可以看到我这里是监听的是8082端口，因为想要使用80端口，服务器和域名是要在同一平台，我用的天翼云的服务器，域名是在阿里云备案的，所以不能使用80,443等常用接口，需要再服务器平台进行域名备案。

在这个配置中有两点很重要，如果你没配置对，那么访问是会出问题的

3.2.1 该配置中的root是不需要的，不需要指向文件夹

3.2.2 访问时首页可以访问，但是首页里面的接口全都没有调用

• 首先分析一下，首页正常访问，但是首页的接口没有被调用，很有可能是js文件并没有被加载，因为代码中的axios请求都是写在js文件中的，而且使用浏览器控制台也确实看到所有的js获取都是404，说明js极有可能被什么拦截了
• 忽略的点
  因为oneinstack自动生成该文件时就带有对js,css.gif等文件的配置，这也是我没注意的地方,原本他自动生成的配置文件时 对js的配置如下：

  location ~ .*\.(js|css)?$ {
    expires 7d;
    access_log off;
  }

问题就出在这里，nginx的在匹配url的时候是从上向下匹配的，当js文件被上面的配置匹配后，就不会走最后的
location ~ { proxy_pass http://127.0.0.1:3000; }
导致js文件并没有被反向代理，从而导致获取js文件报错404

• 解决方法
  既然没有走最后的反向代理，那么我就直接在js拦截里面写上就行了，即

location ~ .*\.(js|css)?$ {
    expires 7d;
    access_log off;
    proxy_pass http://127.0.0.1:3000;
  }

3.3.3 你们在复制别人nginx的配置时也要注意这点