阿里云部署全套Vue+Nodejs+MongoDB项目步骤记录

部署步骤记录（aliyun的Linux远程主机)

1.XHELL和xftp连接远程Linux主机

1.1.下载xshell和xftp（官网可下载），然后开始进行连接远程Linux主机

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TiiJ0hyC-1623231458550)(C:\Users\He Xin\AppData\Roaming\Typora\typora-user-images\image-20210429143838740.png)]

然后先不急，点击左侧用户身份验证输入用户名（默认root）和密码（远程主机实例的密码，忘记的话可以进行重置），接下来再点击链接

1.2 此时链接必定是失败的，这时候要去阿里云实例的地方配置安全规则，将ssh需要的22

端口添加到入规则和出规则中（不清楚入还是出，两个都加上了）

1.3 如果还是失败，从阿里云云服务器控制要进入实例点击远程使用VNC连接先进去。进去之后输入用户名（默认root）和密码(实例的密码)，进去之后，输入以下命令检查防火墙是否允许22端口访问

ufw status
ufw default allow
ufw allow 22
再输入ufw status 进行查看

1.4 此时再去链接xshell和xftp应该就可以了（xftp链接同xshell）

2.Node.js服务器部署到Linux主机上

1. 连接成功xftp后，找到自己电脑上的服务器代码，直接拖到home目录下，到时候要用就去虚拟机上面运行即可

3.Vue项目打包上传到Linux主机

3.1 首先在自己项目根目录下创建一个config文件夹，其中添加如下文件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-unCR0hCJ-1623231458552)(C:\Users\He Xin\AppData\Roaming\Typora\typora-user-images\image-20210429145716598.png)]

index.js中的配置选项设置

module.exports = {
    build: {
        // Template for index.html
        index: path.resolve(__dirname, '../dist/index.html'),
    
        // Paths
        assetsRoot: path.resolve(__dirname, '../dist'),
        assetsSubDirectory: 'static',
        assetsPublicPath: './',
    },
    proxyTable: {
        '/api': {
          target: 'https://8.136.220.192:8888',   //请求地址（公网IP带上服务器端口号）
          changeOrigin: true, //true表示跨域
          secure: false,
          ws: true,
          logLevel: 'debug',
          pathRewrite: {
            '^/api': ''
          }
        },
        '/token': {
          target: 'http://8.136.220.192',   //请求地址（公网IP）
          changeOrigin: true, //true表示跨域
          secure: false,
          ws: true,
          logLevel: 'debug',
          pathRewrite: {
            '^/token': ''
          }
        }
      },
}

prod.env.js中的配置选项的设置

'use strict'
module.exports ={
    NODE_ENV: 'production', 
    HOST: '8.136.220.192',//云服务器的公网IP
    PORT: "8888",//这里是服务器的端口，就是nodejs服务器的api接口监听的端口
}

3.2 然后运行npm run build命令，这个命令会生成一个build文件夹

3.3 我们将此build文件夹放到 /home/bs/中（可以自定义，但是要记住，配置的时候要用）

3.4 远程主机安装nginx

//具体的每一条指令如下
wget http://nginx.org/download/nginx-1.13.6.tar.gz
tar -zvxf nginx-1.13.6.tar.gz
cd nginx-1.13.6

// make编译安装nginx
./configure --with-http_ssl_module --with-http_gzip_static_module
make
make install

// 启动程序
cd /usr/local/nginx/sbin/
./nginx

// 查看运行状态
ps aux | grep nginx

3.5 nginx前端项目代理地址配置

（Vue项目设置了本地代理，部署到Nginx上需要使用反向代理解决生产环境跨域问题）
vue项目代理设置
本地代理地址配置文件 config/index.js

 proxyTable: {
      '/api': {
        target: 'https://api.weixin.qq.com',   //请求地址
        changeOrigin: true, //true表示跨域
        secure: false,
        ws: true,
        logLevel: 'debug',
        pathRewrite: {
          '^/api': ''
        }
      },
      '/token': {
        target: 'http://139.9.xxx.77:8089',   //请求地址
        changeOrigin: true, //true表示跨域
        secure: false,
        ws: true,
        logLevel: 'debug',
        pathRewrite: {
          '^/token': ''
        }
      }
    },

nginx代理设置
在/usr/local/nginx/conf目录下配置nginx.conf文件修改内容
（1） 修改root，（root为项目打包后文件的存放路径。）

 location / {
            root   /home/www/dist;
            index  index.html index.htm;
        }

2）设置nginx反向代理（解决生产环境跨域问题），代理样式如下

location /api/ {
            proxy_pass https://api.weixin.qq.com/;
            add_header Content-Type "text/plain;charset=utf-8";
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Credentials' 'true';
            add_header 'Access-Control-Allow-Methods' 'GET, POST';
       }
       location /token/ {
            proxy_pass http://139.9.xxx.77:8089/;
            add_header Content-Type "text/plain;charset=utf-8";
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Credentials' 'true';
            add_header 'Access-Control-Allow-Methods' 'GET, POST';
       }

3.下面是我自己的配置文件

#user  root; //这里一定要改成自己的root
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    server {
        listen       80; //这里的80端口需要在阿里云安全组中配置出入方向
        server_name  localhost; //这个就是指的自己的公网IP，不用管

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   /home/bsprocject/dist; //重要，这里就是之前存放的前端打包项目路径
            index  index.html; //渲染的初始入口页面
        }

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ \.php$ {
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
        // 下面的这些配置要写上去，我也不知道为什么为什么
       location /api/ {
            proxy_pass https://8.136.220.192/; //自己的公网IP
            add_header Content-Type "text/plain;charset=utf-8";
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Credentials' 'true';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, DELETE';
       }
       location /token/ {
            proxy_pass http://8.136.220.192/; //自己的公网IP
            add_header Content-Type "text/plain;charset=utf-8";
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Credentials' 'true';
            add_header 'Access-Control-Allow-Methods' 'GET, POSTM, DELETE'; //有其他方法就加
       }
    }


    # another virtual host using mix of IP-, name-, and port-based configuration
    #
    #server {
    #    listen       8000;
    #    listen       somename:8080;
    #    server_name  somename  alias  another.alias;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}


    # HTTPS server
    #
    #server {
    #    listen       443 ssl;
    #    server_name  localhost;

    #    ssl_certificate      cert.pem;
    #    ssl_certificate_key  cert.key;

    #    ssl_session_cache    shared:SSL:1m;
    #    ssl_session_timeout  5m;

    #    ssl_ciphers  HIGH:!aNULL:!MD5;
    #    ssl_prefer_server_ciphers  on;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}

}

3.6 nginx配置文件的启动，使对应这个项目的nginx生效可访问

在实际当中服务器中可能有多个vue前端项目，此时我们只要单独修该conf文件即可，一个前端项目对应的一个conf文件。

conf启动命令符如下：
启动项目指定配置文件

cd /usr/local/nginx/sbin/ 
./nginx -c conf/nginx.conf

查看启动进程：

ps -ef|grep nginx_hwfm
ps -ef|grep nginx

4.MongoDB下载安装，远程连接配置

(1)、进入 /usr/local/：
cd /usr/local
(2)、安装mongodb：
wget https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-3.4.5.tgz
(3)、解压安装包，并重命名文件夹为mongodb
mkdir /var/mongodb
mkdir /var/mongodb/data
mkdir /var/mongodb/logs
(5)、设置开机启动项
vim /etc/rc.d/rc.local
（6）打开文件后输入‘i’启用编辑。将mongodb启动命令追加到本文件中，让mongodb开机自启动：
/opt/mongodb/bin/mongod --dbpath=/var/mongodb/data --logpath /var/mongodb/logs/log.log -fork
(6)、手动启动mongodb
/usr/local/mongodb/bin/mongod --dbpath=/var/mongodb/data --logpath /var/mongodb/logs/log.log -fork

注意：我发现现在没有rc.local文件了，需要自己在对应目录下创建一个touch rc.local

里面的配置信息如下

#!/bin/sh -e
# 
# rc.local
#
# This script is executed at the end of each multiuser runlevel.
# Make sure that the script will "exit 0" on success or any other
# value on error.
#
# In order to enable or disable this script just change the execution
# bits.
#
# By default this script does nothing.

# 下面这条是要开机启动的命令
/opt/mongodb/bin/mongod --dbpath=/var/mongodb/data --logpath /var/mongodb/logs/log.log -fork
/usr/local/mongodb/bin/mongod --config /usr/local/mongodb/bin/mongodb.conf

exit 0
#给予脚本执行权限
sudo chmod +x /etc/rc.local

预防万一，不怎么清楚，创建一个rc.d目录，再在里面创建一个rc.local文件写入以下配置

#!/bin/sh -e
# 
# rc.local
#
# This script is executed at the end of each multiuser runlevel.
# Make sure that the script will "exit 0" on success or any other
# value on error.
#
# In order to enable or disable this script just change the execution
# bits.
#
# By default this script does nothing.

# 下面这条是要开机启动的命令
/opt/mongodb/bin/mongod --dbpath=/var/mongodb/data --logpath /var/mongodb/logs/log.log -fork
exit 0
#给予脚本执行权限
sudo chmod +x /etc/rc.local

5.忘了说安装nodejs

(1)、wget命令下载Node.js安装包。
该安装包是编译好的文件，解压之后，在bin文件夹中就已存在node和npm，无需重复编译。

wget https://nodejs.org/dist/v6.9.5/node-v6.9.5-linux-x64.tar.xz
(2)、解压文件。
tar xvf node-v6.9.5-linux-x64.tar.xz
(3),软件默认安装在/root/node-v6.9.5-linux-x64/目录下。如果需要将该软件安装到其他目录（如：/opt/node/）下，请进行如下操作：
mkdir -p /opt/node/
mv /root/node-v6.9.5-linux-x64/* /opt/node/
rm -f /usr/local/bin/node
rm -f /usr/local/bin/npm
ln -s /opt/node/bin/node /usr/local/bin/node
ln -s /opt/node/bin/npm /usr/local/bin/npm
(4)、查看node.js和npm版本：
node -v
npm -v
完成以上步骤node.js就算安装成功了

6.安装PM2

(1)、通过npm全局安装：
npm install pm2 -g
然后pm2 -v 查看版本

7.启动项目

pm2 start /bin/bs

8.如何开启远程连接mongodb数据库

1、在linux下（或windows下）打开终端，进入mongodb的安装目录
2、创建配置文件目录，然后在etc下创建配置文件mongodb.conf

3、sudo vim mongodb.conf命令进入配置文件并编辑

dbpath=/usr/local/mongodb/mongodb-3.6.5/data/db     #数据文件存放目录
logpath=/usr/local/mongodb/mongodb-3.6.5/data/log/mongodb.log   #日志文件存放目录   
port=27017   #端口号
fork=true    #以守护程序的方式启用,即在后台运行
logappend = true  #日志以追加的形式添加
bind_ip = 0.0.0.0 #可以访问的地址. 127.0.0.1表示自己访问,  0.0.0.0 表示所有人都能访问

必须使用sudo命令进入，不然添加配置保存退出时权限不够
4、编辑完之后：wq 保存退出，然后进入bin目录，以配置文件启动
./mongod –config 配置文件目录

./mongod --config /usr/local/mongodb/mongodb.conf

5.启动之后就可以在mongodb本地图形化界面连接远程主机里面的数据库了

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0OXbLYYu-1623231458553)(C:\Users\He Xin\AppData\Roaming\Typora\typora-user-images\image-20210429153820228.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Z2uLU0Nz-1623231458555)(C:\Users\He Xin\AppData\Roaming\Typora\typora-user-images\image-20210429153914707.png)]

9.访问自己的线上项目，直接在浏览器里面输入自己的公网ip即可