记录一次vue-cli项目上线到阿里云并配置Nginx服务器的经历

首先，买一台云服务器是必要的，我使用的是阿里云服务器CentOS 7.4 64位操作系统。
在整个vue-cli项目上线过程中，我遇到了很多问题。不过，最终圆满解决了，因此在这里记录一下。

遇到的问题：

• 云服务器连接
• vue项目打包上线
• nginx安装配置
• 云服务器node的安装
• 本地json数据无法访问
• vue路由页面无法访问

一、使用Xshell连接云服务器

1. 百度下载一个Xshell并安装，下面是我的Xshell6+Xftp6百度云下载地址。
   链接：https://pan.baidu.com/s/1P63qVspQh_GyfKab70izXQ 提取码：1385
2. 双击打开Xshell，并新建一个连接
   

注意：上图的主机就是阿里云上创建的实例的公网ip，如下图：

3. 配置好主机后点击连接，输入登录名和密码，登录名就是购买服务器时输入的登录名和密码。

4. 点击确定后即可成功连接到云服务器，连接成功如下图：
   

二、vue项目打包上线

1. 当我们在本地完成项目开发，可以成功访问项目页面时，运行 npm run build 命令，可以看到项目下有一个dist文件夹，这就是vue项目打包后的文件。

2. 在Xshell中点击xftp工具图标可打开文件界面。再次输入密码后可看到服务器端的文件夹目录。
   
   

3. 把本地打包好的文件放到服务器中，我是放到opt目录下vue-website-pro项目下的，vue-website-pro是我的项目名称。
   

当我们按照上面步骤打包上线后，访问公网ip，是没法看到页面的。这是因为我们不可能通过一台电脑的ip就去访问电脑的文件，云服务器相当于就是一台电脑。所以我们还需要配置服务器代理，我是通过配置nginx实现的，除了nginx还有其他很多服务器也可以实现。如apache等。

三、nginx安装配置

1. 在Xshell终端，也就是命令行窗口，输入命令 yum install nginx ，当需要确认时输入”y“回车。
2. 安装完成后，输入 service nginx start 启动nginx服务。
3. 通过命令 nginx -t 查看nginx所在的安装目录。nginx默认会安装在 /etc/ 目录下
   
4. 在命令行输入命令 cd /etc/nginx 切换到nginx目录下，再输入 cat nginx.conf 可查看当前nginx配置文件。
5. 在nginx目录下，输入 vim nginx.conf 进入nginx配置编辑模式，然后按键盘 i 键，当命令行左下角出现-- INSERT-- 的时候，通过鼠标上下键进行文件修改，具体配置如下图：
   
   注意：关于api的location配置，是对后台api接口进行的配置，这里可暂时不做此配置。
   这里监听的80端口 listen 80，所以我们还需要再阿里云控制台开放80端口，不然还是无法访问。
   
   
   
6. 当完成Nginx配置文件的修改后，按键盘ESC键退出编辑模式，然后输入 :wq 并回车，保存修改并退出。
7. 修改完nginx配置文件后，需要输入 nginx -s reload 重启nginx配置。这里如果重启失败，可输入 nginx -c /etc/nginx/nginx.conf ，然后再次重启。

四、云服务器node的安装

如果要在云服务器上使用node，则我们需要通过命令的方式安装node。

1. 打开Xshell并连接到云服务器
2. 输入命令 wget https://nodejs.org/dist/v10.8.0/node-v10.8.0-linux-x64.tar.xz 回车，等待安装。注意，前面的链接中的v10.8.0是node版本号，可修改版本号安装子集需要的node版本。
3. 安装完成后，输入命令 tar xvf node-v10.8.0-linux-x64.tar.xz 回车进行解压操作。
4. 输入 mv node-v10.8.0-linux-x64 /usr/local/node回车， mv命令移动并改名。此时可切换到/usr/local/node目录下，使用 ls 命令查看下面的文件。
5. 输入命令 vi ~/.bash_profile 进入.bash_profile文件的编辑，按 i 开始编辑，然后在文件的export PATH前一行添加 PATH=$PATH:/usr/local/node/bin 添加完成后按 :wq 退出并保存文件。
6. 运行 source ~/.bash_profile 命令。
7. 此时输入命令 node -v 和 npm -v 可查看node和npm命令是否配置成功。如显示了版本号则表示安装成功。
   

五、解决本地json数据无法访问问题

我的vue项目中使用了node加载了本地json文件中的数据，所以在项目打包上线后，页面可以显示，但是数据没有显示出来。这是因为我读取的本地db.json中的数据，自己写了一个api接口。

所以，这里还需要配置下nginx后台服务器地址，我的处理方式是：

1. 通过xftp将自己的后台server文件上传上去，因为使用express和一些第三方模块，也将package.json文件一并上传了。
   
   
2. 切换到项目目录下，使用 npm install 命令安装第三方模块。安装完成后，会发现项目文件夹下多了一个node_modules文件夹。
3. 只是上传了文件夹还不够，我们还需要配置nginx后台服务器地址，按照上面（三）中配置nginx的步骤对nginx.config文件进行编辑，添加一个location。如果再上面配置Nginx的时候已经添加了可以不用再添加。
   

• 上图中的 location ~/api/ 双斜杠中间的api就是server文件中定义的接口 apiServer.use('/api', apiRouter);
• proxy_pass 是后台服务器地址，因为是获取本地json数据，则域名写的是http://127.0.0.1,端口号8081是server文件中监听的端口 apiServer.listen(8081， fn) 。

4. 配置好nginx并保存后，重启nginx，使用上面的命令重启nginx。
5. 要是node写的后台接口生效，我们需要使用 node index.js 运行node文件，但这样当我们关闭终端的时候，node后台将停止，所以我们需要安装forever来让其永久运行。

• 安装： $ npm install forever -g
• 启动： $ forever start app.js
• 关闭： $ forever stop app.js
• 输出日志和错误： $ forever start -l forever.log -o out.log -e err.log app.js
• 其他关于forever的使用请参考forever的github地址

六、解决vue路由页面无法访问问题

通过上面的步骤配置好了nginx并将项目打包上线后，我们可以直接访问阿里云外网地址访问我们的vue项目页面了，但我发现又出现了一个问题，vue项目的页面访问时通过vue-router来控制的，结果我点击页面链接后，路由页面出现的是nginx not found。其实，解决方法vue-router的官网已经有了明确的说明，我们只要在nginx.config文件中加入下面的代码即可：

如果再（三）中nginx配置的时候，已经加上了此配置则无需再加。
如果你使用的是其他服务器，如apache等，vue-router官网也有解决方案，详细请参考链接：vue-router后端配置

此时，再通过阿里云的公网ip访问，就可以看到我们的项目啦，啦啦啦啦~
欢迎访问我的阿里云网址！ http://47.105.134.120:8080