从零开始部署vue+node+mongodb全栈项目

从零开始部署vue+node+mongodb全栈项目，既为个人记录，也为分享(最简单的方案，本人亲测)。

配置阿里云服务器安全组规则

​ 如果你不配置这个规则，那么你连mongodb，node部署的后端应用接口都访问不到。常见配置如下。

安全组规则

安装node

第一步，升级 apt-get 源

sudo apt-get update

第二步，安装node

sudo apt-get install node

第三步，安装npm

sudo apt-get install cnpm

检验是否安装成功

nodejs -v 
npm -v

安装mongodb

$ curl -O https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-ubuntu1404-3.2.9.tgz

$ tar -zxvf mongodb-linux-x86_64-ubuntu1404-3.2.9.tgz

sudo mv mongodb-linux-x86_64-3.0.6/ /usr/local/mongodb   # 将解压包拷贝到指定目录进行安装

$ sudo mkdir -p /data/db    #创建数据存储目录
$ sudo mkdir -p /data/logs/mongodb.log    #创建数据存储目录
$ sudo chmod 755 /data/*    #赋予目录权限

cd /usr/local/mongodb  
./bin/mongod --dbpath=/data/db  --logpath=/data/logs/mongodb.log --logappend --fork

安装pm2

npm i pm2 -g

npm install pm2 -g ： 全局安装。
pm2 start app.js ： 启动服务，入口文件是app.js。
pm2 start app.js -i [n] --name [name] ： 启动n个进程，名字命名为name。
npm restart [name or id] ： 重启服务。
npm reload [name or id] ： 和rastart功能相同，但是可以实现0s的无缝衔接；如果有nginx的使用经验，可以对比nginx reload指令。
pm2 start app.js --max_memory_restart 1024M ： 当内存超过1024M时自动重启。 如果工程中有比较棘手的内存泄露问题，这个算是一个折中方案。
pm2 monit ： 对服务进行监控。
pm2 list ：查看已运行的任务

部署后端项目

将你的后端项目代码，拷贝到服务器上，使用npm i 安装好依赖，然后使用，pm2 start app.js 可以看到服务已经启动完毕。后端部署ok.

安装nginx

sudo apt-get install nginx

安装好了不出意外，你输入你的IP地址，能看到nginx 的欢迎界面。

文件存储目录

/usr/sbin/nginx：主程序

/etc/nginx：存放配置文件

/usr/share/nginx：存放静态文件

/var/log/nginx：存放日志

sudo service nginx {start|stop|restart|reload|force-reload|status|configtest|rotate|upgrade}的命令启动。

sudo nginx -t  //查看使用的配置文件


cd /etc/nginx 
vim nginx.conf //修改配置

//nginx常用配置
location / {
            root   /usr/website/dist;
            index  index.html index.htm;
        }

         location ~ ^/(images|img|javascript|js|css|flash|media|static)/ {
            root   /usr/website/dist;   #####静态资源的路径
            autoindex on;
            access_log  off;
            expires     30d;           #####设置缓存时间
        }

部署前端项目

​ 将你的前端项目打好包之后，记住你放前端项目的地址，比如我放置的地址为/usr/website/dist,那么nginx就如上配置，还要配置静态资源解析规则。正常情况下，重启nginx，(sudo service nginx restart)刷新页面，就ok了。

注意事项：

• 部署之后，出现403错误，nginx 没有权限读取静态资源，解决方案：将nginx的启动配置的最上面 改成 user root.或者给你的 静态资源文件夹，添加读取权限。sudo chmod 777 /website/*;

• 前端找不到文件，404错误，解决方案。

publicPath: './',  //将webpack中的publicPath改成这个。

• 部署成功后，可能会出现刷新即404，解决方案

location / {
　　root  /；
　　index index.html;
　　try_files $uri $uri/ /index.html //刷新后，重新请求的页面。
}

欢迎关注我的微信公众号
搜索：前端优学。
or扫码：

获取更多更好更有深度的前端学习好文。