Believel/blog

服务器上直接部署前端(vue或react)项目和后台node项目

Opened this issue · 0 comments

Believel commented

[toc]

开发好项目

这里就不用说了，就是开发好前端项目和后台项目。

购买服务器

这里我购买的是阿里云上的云服务ECS, 预装环境选择了CentOS7

服务器上安装所需环境

  1. 一般新服务器，升级一下 CentOS
yum -y update
  1. 使用nvm安装node
wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.0/install.sh | bash

// 执行脚本(这样就会有nvm)
. /root/.bashrc

// 安装最新版本的 node 和 npm    
nvm install stable

// 切换安装源, 配置阿里云源   
npm install nrm -g

  1. 安装 git

    • 命令
    yum install git -y
    • 生成公钥
    ssh-keygen -t rsa -b 4096 -C "邮箱"

// 公钥路径：cat /root/.ssh/id_rsa.pub
// 然后放在github上

  2. 安装 pm

    • 命令
    npm install pm2 -g  // 基于nodejs开发的进程管理器
//适用于后台常驻脚本管理，同时对node网络应用有自建负载均衡功能
    • 常用命令
    pm2 start app.js -i 2 // -i 后面跟的 2 表示启动2个server实例
pm2 ls // 查看已经启动的实例
pm2 scale app + 1  // +1 就是扩容一个服务实例，其实就是增加一个cluster的worker子进程
pm2 stop 1   // 终止某个进程, 1表示的是那个进程的id
pm2 reload app // 重启进程 
pm2 start app.js --name webhook --watch // --name是起的名字
pm2 stop 名字（如果起名字了，可以直接使用） // 停止进程
pm2 logs  // 查看日志

  3. 安装 nginx

    • 创建一个文件
      vi /etc/yum.repos.d/nginx.repo
    • 写入下面内容
    [nginx]
name=nginx repo
baseurl=http://nginx.org/packages/centos/7/$basearch/
gpgcheck=0
enabled=1
gpgkey=https://nginx.org/keys/nginx_signing.key
    • 安装nginx
    yum install nginx -y
    • 安装成功验证
    nginx -v   查看安装版本
nginx -V   查看参数
rpm -ql nginx 查看配置文件和目录
    • 查看配置文件
    /etc/nginx/nginx.conf    主配置文件
/etc/nginx/conf.d/*.conf
/etc/nginx/conf.d/default.conf
    • 常用命令
    systemctl start nginx.service    第一次启动
systemctl restart nginx.service  再次启动
nginx -s reload 重启服务
    • 在浏览器上验证nginx是否安装成功
      • 使用云服务器上的ip地址，直接输入在浏览器地址栏中，看是否有“Welcome to nginx的页面”，有就是成功了
      • 或者在自己的电脑上可以配置一个域名，打开C:\Windows\System32\drivers\etc，编辑hosts文件，在末尾添加
      ip地址  域名
// 例如
47.110.229.81   www.zpp.com
      • 或者在linux命令中运行curl http://localhost:80来执行http请求

参考资料：http://nginx.org/en/linux_packages.html

服务器上开放端口与设置规则

进入阿里云的管理后台，在“本实例安全组中”可以设置你要使用的端口号，如果不设置，即使部署到服务器上也是访问不成功的。

用nginx来提供HTTP服务器或者设置代理

  • 进入 '/etc/nginx/conf.d/default.d'
  • 配置前端访问地址和代理后台接口如下：
server {
    # 监听80端口
    listen       80;   
    server_name  test.com; // 你的域名或者服务器ip地址

    #charset koi8-r;
    #access_log  /var/log/nginx/host.access.log  main;

    location / {
        root   /usr/share/nginx/html/index.html;
        index  index.html index.htm;
    }
    # 前端项目配置http服务，当访问：ip:80/front，其中"/front"是子集目录
    location /front {
        # 前端项目所在服务器位置，同时前端项目中也要配置子目录为'/front'
       alias /usr/zhangpanpan/react-by-ts/front;
       index index.html; // hash模式只配置访问html就可以了
       try_files $uri $uri/ /front/index.html; // history模式下
    }
    # proxy the node
    location ^~ /api/ {
      # 当请求test.com/api/a接口时会转发到http://localhost:3000/api/a接口上
      # 如果代理地址是以/结尾的：http://localhost:3000/,接口则会转发到http://localhost:3000/a上
      proxy_pass 后台接口地址(例如： http://localhost:3000);
    }
}
  • 配置之后，重启nginx：nginx -s reload 即可

上传项目代码

服务器上安装好git之后，直接把前端项目和后台项目上传到指定的目录上即可

启动express服务器

利用pm2， 进入后台项目所在目录下，启动命令：pm2 start 要启动的文件地址，例如：pm2 start ./bin/www