前端部署服务器小节

发表于

最近在将一些前端项目部署到服务器，现在总结一下关键步骤和踩过的一些坑

一、连接到Linux服务器

既然是部署到Linux服务器，当然要先有一个服务器啦，没有服务器的话可以先买一个“阿里云”或者“腾讯云”的服务器

Example:

`ssh -p port root@xx.xx.xxx.xx`  => 输入密码

port:  端口

root: 用户名

xx.xx.xxx.xx: IP

二、在服务器上安装相关依赖（若已安装可跳过）

1 . 安装node

部署前端项目当然要安装Node啦， 官方提供的安装方法：

`curl --silent --location https://rpm.nodesource.com/setup_8.x | sudo bash -`

`sudo yum -y install nodejs`

执行 node -v 检查node是否安装成功

  1. 安装淘宝镜像

    sudo npm i -g cnpm

  2. 安装nrm

    sudo cnpm install -g nrm

    nrm 是一个 NPM 源管理器，允许我们快速地切换源。

  3. 安装PM2

    sudo npm i -g pm2

    PM2是node进程管理工具，可以利用它来简化很多node应用管理的繁琐任务，如性能监控、自动重启、负载均衡等，而且使用非常简单。

    常用PM2命令:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    启动：
    pm2 start app.js

    停止：
    pm2 stop app.js

    删除：
    pm2 delete app.js

    查看进程状态：
    pm2 ls

三、建立文件夹并上传文件

Example:

  1. 进入服务器后进入目标文件夹

    cd ../usr/local/your/project/path

  2. 建立 public 文件夹

    mkdir public

  3. 在本地 /public 目录下执行 npm run build，然后压缩 dest 文件夹得到 dest.zip , 压缩 server 得到 server.zip

  4. FileZilla是一个免费开源的FTP客户端软件，可以用它很方便地将文件上传至服务器

    用 FileZilla 将 dest.zip 上传到 /public 下面,

    用 FileZilla 将 server.zip 文件夹上传到 /your/project/path

  5. 执行

    sudo unzip dest.zip

    sudo unzip server.zip

    进行解压，解压后目录结构如下:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    /usr/local/your/project/path/
    |
    —— public
    |	     |
    |	      —— dest
    |	     |
    |	      —— dest.zip
    |
    |
    —— server

  6. server目录下面 npm start(本地查看) / npm run serve

  7. 测试项目是否可以运行，访问：

    http://服务器的IP:端口号/app.html#/

    http://47.100.10.84:7382/app.html

四、注意事项：

  • 如果使用非root（如workflowadmin）用户登录遇到没有在该用户下读写文件的权限的问题

    1. 可以先将 /server 和 /public 上传到 workflowadmin 用户下

    2. 再通过命令

      mv /home/workflowadmin/public/ /usr/local/workflow/workflow-static/

      mv /home/workflowadmin/server/ /usr/local/workflow/workflow-static/

      将 /public 和 /server 移动到 root 用户下

      sudo -i (切换到root用户)

      su -l workflowadmin (切换到workflowadmin用户)

  • 使用ts-node启动在一个服务器上启动多个项目

    1. 可以选择不使用ts-node，在/server下执行 tsc（需先全局安装typescript） ，编译成 /dist

    2. 修改 /server/package.json ，如果修改 App name 可以在后面加上
      --name project-name

      1
      2
      3
      4
      5
      6
      7
      "serve": "pm2 start ts-node -- ./src/index.ts",
      "stop": "pm2 stop ts-node -- ./src/index.ts",

      为

      "serve": "pm2 start ./dist/index.js --name project-name",
      "stop": "pm2 stop  ./dist/index.js --name project-name",

  • Cannot find module pm2/lib/ProcessContainerFork.js

    全局安装的 pm2 和 ts-node 一起使用时可能会出现上述报错，解决办法就是：

    1. rm -rf ~/.pm2

    2. 需要使用pm2的时候用项目内的

      node_modules/pm2/bin/pm2

  • 端口被占用

    1. lsof -i:端口号 查询被占用端口的 PID 值
    2. kill PID 杀掉占用该端口的进程