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

素颜马尾好姑娘i 2022-05-11 06:12 317阅读 0赞

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

遇到的问题：

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

## 一、使用Xshell连接云服务器 ##

1.  百度下载一个Xshell并安装，下面是我的Xshell6+Xftp6百度云下载地址。  
    链接：[https://pan.baidu.com/s/1P63qVspQh\_GyfKab70izXQ][https_pan.baidu.com_s_1P63qVspQh_GyfKab70izXQ] 提取码：1385
2.  双击打开Xshell，并新建一个连接  
    ![在这里插入图片描述][70]

注意：上图的主机就是阿里云上创建的实例的公网ip，如下图：  
![在这里插入图片描述][70 1]

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

![在这里插入图片描述][70 2]

1.  点击确定后即可成功连接到云服务器，连接成功如下图：  
    ![在这里插入图片描述][70 3]

## 二、vue项目打包上线 ##

1.  当我们在本地完成项目开发，可以成功访问项目页面时，运行 `npm run build` 命令，可以看到项目下有一个dist文件夹，这就是vue项目打包后的文件。
2.  在Xshell中点击xftp工具图标可打开文件界面。再次输入密码后可看到服务器端的文件夹目录。  
    ![在这里插入图片描述][70 4]  
    ![在这里插入图片描述][70 5]
3.  把本地打包好的文件放到服务器中，我是放到opt目录下vue-website-pro项目下的，vue-website-pro是我的项目名称。  
    ![在这里插入图片描述][70 6]

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

## 三、nginx安装配置 ##

1.  在Xshell终端，也就是命令行窗口，输入命令 `yum install nginx` ，当需要确认时输入”y“回车。
2.  安装完成后，输入 `service nginx start` 启动nginx服务。
3.  通过命令 `nginx -t` 查看nginx所在的安装目录。nginx默认会安装在 /etc/ 目录下  
    ![在这里插入图片描述][70 7]
4.  在命令行输入命令 `cd /etc/nginx` 切换到nginx目录下，再输入 `cat nginx.conf` 可查看当前nginx配置文件。
5.  在nginx目录下，输入 `vim nginx.conf` 进入nginx配置编辑模式，然后按键盘 i 键，当命令行左下角出现-- INSERT-- 的时候，通过鼠标上下键进行文件修改，具体配置如下图：  
    ![在这里插入图片描述][70 8]  
    注意：关于api的location配置，是对后台api接口进行的配置，这里可暂时不做此配置。  
    这里监听的80端口 listen 80，所以我们还需要再阿里云控制台开放80端口，不然还是无法访问。  
    ![在这里插入图片描述][70 9]  
    ![在这里插入图片描述][70 10]  
    ![在这里插入图片描述][70 11]
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命令是否配置成功。如显示了版本号则表示安装成功。  
    ![在这里插入图片描述][70 12]

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

我的vue项目中使用了node加载了本地json文件中的数据，所以在项目打包上线后，页面可以显示，但是数据没有显示出来。这是因为我读取的本地db.json中的数据，自己写了一个api接口。  
![在这里插入图片描述][70 13]  
所以，这里还需要配置下nginx后台服务器地址，我的处理方式是：

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

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

1.  配置好nginx并保存后，重启nginx，使用上面的命令重启nginx。
2.  要是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地址][github]

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

通过上面的步骤配置好了nginx并将项目打包上线后，我们可以直接访问阿里云外网地址访问我们的vue项目页面了，但我发现又出现了一个问题，vue项目的页面访问时通过vue-router来控制的，结果我点击页面链接后，路由页面出现的是nginx not found。其实，解决方法vue-router的官网已经有了明确的说明，我们只要在nginx.config文件中加入下面的代码即可：  
![在这里插入图片描述][70 17]  
如果再（三）中nginx配置的时候，已经加上了此配置则无需再加。  
如果你使用的是其他服务器，如apache等，vue-router官网也有解决方案，详细请参考链接：[vue-router后端配置][vue-router]

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

![在这里插入图片描述][70 18]

[https_pan.baidu.com_s_1P63qVspQh_GyfKab70izXQ]: https://pan.baidu.com/s/1P63qVspQh_GyfKab70izXQ
[70]: /images/20220511/8e4f96da11254f549aace4415754dfaf.png
[70 1]: /images/20220511/4860fad72e6448bf88d57ced0f5ec871.png
[70 2]: /images/20220511/7652c0a5cfc94ced8cec33e823c053a4.png
[70 3]: /images/20220511/e449d9be1f9f4ed686f5a004c5c3681c.png
[70 4]: /images/20220511/bcbbe182864a4ece836301bda2c0743a.png
[70 5]: /images/20220511/37c5bb1004a34c34a5af37f37ecd1337.png
[70 6]: /images/20220511/245cb22dcc734c02a5dd5696dc4f445d.png
[70 7]: /images/20220511/f9862dd04c904a4fbdddb6ac83a498c0.png
[70 8]: /images/20220511/6f58343289154ea8921eee770cfe3425.png
[70 9]: /images/20220511/98af794a37eb4a498606103a82d5a106.png
[70 10]: /images/20220511/8531cbcbe9c44699941dd5c198160b11.png
[70 11]: /images/20220511/39d8a8856d754497a70a0afacb325fb5.png
[70 12]: /images/20220511/54ecede0c59e47189b45e490db4abc37.png
[70 13]: /images/20220511/ef84eabb8b3440daa60262b57e8dc8de.png
[70 14]: /images/20220511/e29b63e238384a3c8f1d27f8138692de.png
[70 15]: /images/20220511/da8bc00f902840529e6bd2f9fc3f4d84.png
[70 16]: /images/20220511/5a0fb771fea243458142f33657ba8bdc.png
[github]: https://github.com/foreverjs/forever
[70 17]: /images/20220511/2b8f7923728141c08152667dcc5cdb72.png
[vue-router]: https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90
[http_47.105.134.120_8080]: http://47.105.134.120:8080
[70 18]: /images/20220511/19c29407f0c34bccada88d7acaf5f81e.png