vue+express+mongodb项目打包部署在云服务器上

Vue+express+mongodb项目打包部署在云服务器上

笔者所处前提：一台安装了node+mongodb+pm2的云主机。相关安装教程大家可自行网上搜索。
由于笔者买的是腾讯云的学生服务器（centos7），这里就以它为例子。
第一：配置安全组。

在安全组中新建规则，选择开放端口。

在新规则右侧的管理实例中添加你的云主机。然后修改规则，添加可能用到的端口。

第二：进入你的云主机，检查防火墙设置。
启动服务：systemctl start firewalld.service
关闭服务：systemctl stop firewalld.service
查看所有打开的端口： firewall-cmd --zone=public --list-ports
添加端口：firewall-cmd --zone=public --add-port=80/tcp --permanent （-- permanent永久生效，没有此参数重启后失效）
刷新一下防火墙：firewall-cmd --reload
再次查看所有已打开的端口。
防火墙的其他操作读者们可自行百度。
这里将express中listen的端口开放。
第三：打包部署。
将除了node_modules的其他项目文件上传至云主机node服务器下新建的一个文件夹中，这个文件夹可以专门用来装你的node项目。这里笔者用的winscp可视化工具直接拖拽上传。

进入项目目录（cd vuemongo），我这里是vuemongo，然后npm install 重新安装node_modules模块，之所以这么做是因为node_modules太大，上传巨慢。
安装完成后输入 npm run build ，将生成的dist文件夹连同内容一起移入到你搭建http服务器的那个js文件的同级目录中。
第四：express配置。

const express=require('express');
const path = require('path');
var app=express();
app.use(express.static(path.join(__dirname, 'dist')));
app.listen(3000);

这里__dirname表示当前文件所在项目下的目录名，所以如果这么写，要把dist文件夹放在跟它同级目录，否则可能会报404。
第五：pm2 启动这个http服务。

pm2 start index.js
不出意外的话，应该就可以通过"公网ip:端口号"访问此项目了。
笔者第一次写博客，如有错误或不足的地方非常欢迎读者们指出。
这里附上阮一峰大大的linux守护进程教程（里面有pm2的介绍）：http://www.ruanyifeng.com/blog/2016/02/linux-daemon.html
2019年1月7号补充：
关于静态资源路径和动态资源路径配置问题个人总结：
举个栗子：静态资源就是指我在npm run serve调试开发时（我这里用的是vue-cli3脚手架，2.x应该是npm run dev吧）的图片css以及fonts字体等放在前端vue工程中用到的资源。动态资源：比如我的项目需要上传图片视频或是其他文件，后台放在磁盘上相应的文件夹中，这个时候得用http的方式获取这些资源，或许你在开发时可以用require(‘相对路径’)获取到服务器端的资源，但是无论怎样最终都是要打包部署的。这时候就得用‘http://ip:监听端口/资源路径’这种形式的url来设置img里面的src或者是video里的src，而不是require，这里列出我的处理方式。

在vue的main.js中设置个全局变量goble，那么在页面中就可以通过this.$Goble获取到这个值。
我这里的res_url就是src里绑定的值。
前端处理好后就在后台配置下：

由于我用的express框架，所以如果要让前端能以http的方式获取到图片，这里的app.get就是配置资源路径的。如果不用express框架，用node原生的写法也可以。
这里附上别人的博客。

https://www.cnblogs.com/juehai/p/9606511.html
我也是在网上搜了半天才搜到的，可能是我的搜索方式不对吧。

2019年1月25日补充
关于动态资源网络请求url问题：
需求描述：我的项目中有的动态资源名包含汉语，或者文件夹名有汉语，总之就是最后http这样的网络请求url中有汉语，此时网络请求不通，得通过转码才能访问。这里简单的介绍下面三个方法（js），有兴趣的可以自己去搜：
escape()：主要用于对字符串进行编码，不常用。
encodeURI()：进行url跳转时可以整体使用encodeURI。
例如： Location.href=encodeURI(“http://cang.baidu.com/do/s?word=百度&ct=21”);
encodeURIComponent()：一般对url后面接的参数编码。
像这样：？aid=7&u=encodeURIComponent(“汉语”)
反向编码（解码，js）：unescape,decodeURI,decodeURIComponent

2019年8月7日补充

nginx代理nodejs加配置https

早就在腾讯云花了19块整了个一年的域名。一直想弄个https，今天整了一天算是整出来了。

进入腾讯云的ssl证书专栏你应该能看见这样一个界面（前提是你买了个域名，它好像会配套送一年的证书，我当初好像就是免费送的证书）。

绑定到你的项目，我这里是默认项目。下面是别人的nginx的安装教程。
https://blog.csdn.net/WuLex/article/details/90139141
说一下注意点，wget会把压缩包下载到你当前所在目录下，如果你想下在指定目录，你可以先通过cd 命令进入一个你想放置nginx源文件的目录。还有一点注意点，我上面贴的那个博客上的gcc之类的环境得安啊，我刚开始就是没有安装后来出现一些莫名的错误，整了好久才发现还是得安，如果上面这个链接失效了，读者们也可以自行去百度nginx指定版本的安装，还可以直接用yum安装，这样虽然简单，但是如果不是最新的源，那么你下载的nginx版本也可能不是你参考的配置版本。而且证书文件的解析好像还是需要一些环境的支持。为了防止上面链接失效我这里粘贴一下。

yum install -y gcc gcc-c++ pcre pcre-devel zlib zlib-devel openssl openssl-devel

一直看到他的第十点结束，后面的反向代理我没参考他的。

---

到这里我假定你已经把nginx安装好，nginx.service服务也有，至于需不需要开机自启动，你看着办，反正我没有。然后比较重要的来了，为了保证我们能正常访问到网页，一些端口必须得开，https是443端口，所以你得在安全组中加入443端口，同时如果你还开启了centos7的防火墙服务，就像我最上面所讲的。你防火墙也得开启这个443端口，我就是因为没开启防火墙端口而整了好长时间，一直找不出是什么原因。开启这两个端口后就可以开心的配置nginx.conf文件了，这个是nginx启动的默认配置文件。通过winscp这个软件（腾讯官方推荐的），我们连接到我们的linux云服务器，在里面可以编辑windows文本一样编辑各种文件，对于我们这种不怎么熟悉vim和linux命令的小白来说就是一大福音啊。最开始我们的node服务器的入口文件中设置的端口不是80么，所以就算访问域名可以访问到node服务器返回的html，因为80端口可以不用写，一般网站都是默认的80端口，现在我们把端口改成3000，对应express框架就是app.listen(3000) 然后用winscp编辑这个nginx.conf文件。这里我参考腾讯云官方给出的配置。
简单介绍下：以#开头的表示注释，跟代码里的//相似。
主要的配置就两处：

    server{
            listen       80;
            server_name  你的域名;
            rewrite ^(.*)$ https://$host$1 permanent; #把http的域名请求转成https
    }
    server{
           listen 443 ssl;
           server_name 你的域名; #填写绑定证书的域名
           # root /var/www/www.domain.com; #网站主页路径。此路径仅供参考，具体请您按照实际目录操作。
           # index index.html index.htm;   
           ssl_certificate  你的证书名称.crt; #证书文件名称
           ssl_certificate_key 你的私钥.key; #私钥文件名称
           ssl_session_timeout 5m; #下面的这些是些加密优化配置，上面两行最重要
           ssl_ciphers HIGH:!aNULL:!MD5;# ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
           ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
           ssl_prefer_server_ciphers on;
       # location ~ /.ht {
       #     deny  all; #表示在url中拦截所有文件名含有.ht的请求，我这里没开启
       # }
        location / {
             proxy_pass   http://127.0.0.1:3000;#表示请求转发，和vue代理跨域有些类似
             # 后面还可以加一些优化配置
        }
    }

其实真正要配置的东西不多，弄懂一些配置之后也没那么难理解，按照我上面给出的配置配置好后，可以重启，或者先关掉nginx再启动nginx服务来让配置生效。这里我以我的实际操作为例：
/usr/local/nginx/sbin/nginx -t 可以查看你conf文件的配置情况，如果你在某一行忘了加分号，它会报错。
/usr/local/nginx/sbin/nginx直接输入这个目录下的nginx文件表示启动nginx。当然，如果你配置了nginx服务，也可以通过systemctl start nginx来启动，除了start，你还可以用restart，stop来重启或者关闭nginx服务。
netstat -ntlp | grep nginx可以查看nginx的启动状态，如果你上面的都没问题的话，这行命令应该会出现两行结果，一个对应80端口，一个则是443端口。
通过pkill nginx可以干掉我们通过/usr/local/nginx/sbin/nginx启动的进程。
大致就是这样了，大家遇到问题可以多百度，希望我的文档能给予读者们一定的帮助，最后提醒一遍，安全组和防火墙（如果你启动了防火墙）得开对应的端口，不然你辛辛苦苦配置好，nginx成功运行也没报错，node项目也没bug，能用pm2挂载，但就是无法访问到你的页面！不报错的问题往往才是最让人头疼的。
最后，我重新配置好了node服务端口为3000，如果我不想外界能通过这个端口访问到我的node项目，同样的，我可以在安全组和防火墙中把这个端口取消掉。