全栈项目上线部署

js web 全栈项目上线部署

前言

项目开发得差不多的时候，就需要部署到服务器上进行测试，一般大公司会有自己的服务器，而多数公司则需要购买云服务器，比如阿里云、腾讯云和七牛云等，在这里只分享一下我在阿里云的部署过程。

购买服务器

第一步先去阿里云用手机号码注册一个账号https://www.aliyun.com/, 然后购买一个ecs的云服务器，一般选择最便宜的即可，学生的话会有优惠，购买服务器的时候选择 centos 7.x系列的即可，付款成功后就可以去设置登录密码了。

第二步打开Mac本地的终端，输入一下命令登录服务器：

ssh [email protected] // 然后输入您设置的密码

搭建基本的环境

登录服务器成功后，就可以搭建最基本的环境了，我们需要安装nvm及需要的node版本，mysql数据库，ngnix 和 线上部署工具pm2。

安装nvm

  sudo curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.8/install.sh | bash

安装最新稳定的node

nvm install --lts

安装mysql

http://dev.mysql.com/get/mysql57-community-release-el7-10.noarch.rpm
yum -y install mysql57-community-release-el7-10.noarch.rpm
wget -i -c 
yum -y install mysql-community-server
grep "password" /var/log/mysqld.log // 找到安装时设置的默认密码

mysql -uroot -p // 使用上面的密码登录MySQL并修改密码
ALTER USER 'root'@'localhost' IDENTIFIED BY '新密码';
ln -s /var/lib/mysql/mysql.sock /tmp/mysql.sock

修改成功后使用新密码重新登录，就可以正常操作MySQL了。

安装ngnix

yum install gcc-c++
yum install -y pcre pcre-devel
wget http://nginx.org/download/nginx-1.14.0.tar.gz
tar -zxvf nginx-1.14.0.tar.gz

./configure --prefix=/usr --sbin-path=/usr/sbin/nginx --conf-path=/etc/nginx/nginx.conf --error-log-path=/var/log/nginx/error.log --pid-path=/var/run/nginx/nginx.pid --lock-path=/var/lock/nginx.lock --user=nginx --group=nginx --with-http_ssl_module --with-http_flv_module --with-http_gzip_static_module --http-log-path=/var/log/nginx/access.log --http-client-body-temp-path=/var/tem/nginx/client --http-proxy-temp-path=/var/tem/nginx/proxy --http-fastcgi-temp-path=/var/tem/nginx/fcgi --with-http_stub_status_module

make && make install

useradd -s /sbin/nologin -M nginx
id nginx
sudo mkdir -p /var/tem/nginx/client

nginx -c /etc/nginx/nginx.conf -s reload

nginx -t

nginx -s stop

安装pm2

在Mac本地电脑和服务器输入：

npm install -g pm2

项目部署

测试服务器是否能被外网访问

root登录后创建一个koa项目：

mkdir test
cd test
npm init 
npm install --save koa
vi index.js 

然后再index.js输入以下内容：

输入以下内容：
const Koa = require('koa');
const app = new Koa();

const main = ctx => {
  ctx.response.body = '服务器外网访问正常';
};

app.use(main);
app.listen(3600);

然后启动服务器：

node index.js

通过服务器外网网址访问：

http://47.xx.xx.xxx:3600 

确认是否能访问。

一般需要去阿里云上去设置安全组的规则，才能正常访问。

添加部署用户

root登录后，添加专门部署的账号：

adduser xqart
passwd xqart // 设置登录密码
chmod -v u+w /etc/sudoers
vi /etc/sudoers
添加：
xqart ALL=(ALL)  NOPASSWD:ALL
chmod -v u-w /etc/sudoers

将服务器的ssh key添加到 码云或者内部搭建的gitlab

ssh-keygen -t rsa -C '189116814xx'
cat ~/.ssh/id_rsa.pub

把它贴到代码托管平台码云或gitlab就可以拉取在服务器的代码了

对于我们的前后端分离的项目，需要拉取两次，分别安装依赖和启动。

配置ngnix

vi /etc/nginx/nginx.conf

内容参考以下例子：

user  root;
worker_processes  2;

error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;

events {
    use epoll;
    multi_accept on;
    worker_connections  1024;
}

http {
    include       /etc/nginx/mime.types;
    server_names_hash_bucket_size 64;
    server_tokens off;
    tcp_nopush on;
    tcp_nodelay on;

    default_type  application/json;

    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  /var/log/nginx/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;
    client_header_timeout 10;
    client_body_timeout 10;
    reset_timedout_connection on;
    send_timeout 10;

    limit_conn addr 5000;
    limit_conn_zone $binary_remote_addr zone=addr:5m;

    gzip  on;
    gzip_disable "msie6";
    gzip_proxied any;
    gzip_min_length 1000;
    gzip_comp_level 6;
    gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;

    open_file_cache max=100000 inactive=20s;
    open_file_cache_valid 30s;
    open_file_cache_min_uses 2;
    open_file_cache_errors on;

    include /etc/nginx/conf.d/*.conf;
}

然后，创建 conf.d 目录：

mkdir conf.d
vi /etc/nginx/conf.d/xqarth5.conf

内容参考以下例子：

server {
        listen 80;
        server_name localhost;

        error_page 500 502 503 504 /50x.html;
        location = /50x.html {
        root html;
        }

        root /home/xqart/h5/current/dist ;
        index index.html;

        location / {
        try_files $uri $uri/ @router;
        index index.html;
        }

        location @router {
        rewrite ^.*$ /index.html last;
        }

        location /api {
            proxy_pass http://localhost:3600;
        }
        location /assets {
            proxy_pass http://localhost:3600;
        }
}

然后, 重启ngnix, 就能访问h5的页面了。

自动部署

每次登陆到服务器去部署项目，不安全，也比较麻烦，所以需要配置一下本地自动部署。

配置服务器免密登陆

将本地Mac生成的公钥 添加到远程服务器

ssh-keygen
ssh-copy-id -i .ssh/id_rsa.pub [email protected]

安装pm2

在Mac电脑安装pm2工具

npm install -g pm2

初始化配置文件

pm2 ecosystem

后端参考的例子如下：

{
  apps : [
    {
      name: "server",
      script: "src/app.js",
      env: {
        COMMON_VARIABLE: "true"
      },
      env_production : {
        NODE_ENV: "production"
      }
    }
  ],
  deploy : {
    production : {
      user: "xqart",
      host: "47.xx.xxx.xxx",
      ref: "origin/master",
      repo: "[email protected]:kongwutw/xqart-server-koa.git",
      path: "/home/xqart/server",
      "post-deploy": "git pull && npm install && pm2 start ecosystem.json --env production"
    }
  }
}

h5参考的例子如下：

{
  apps : [
    {
      name: "h5",
      script: "build/build.js",
      env: {
        COMMON_VARIABLE: "true"
      },
      env_production : {
        NODE_ENV: "production"
      }
    }
  ],
  deploy : {
    production : {
      user : "xqart",
      host : "47.xx.xxx.xxx",
      ref  : "origin/master",
      repo : "[email protected]:kongwutw/xqart-h5-vue.git",
      path : "/home/xqart/h5",
      "post-deploy" : "git pull && npm install && npm run build"
    }
  }
}

初始化远程服务器

pm2 deploy production setup

部署

在两个项目下分别执行：

pm2 deploy production