React+Express项目(ts)打包并部署到云服务器上

本菜鸡最近写了个简单的前后端分离项目，兴致冲冲去部署，没想到踩了很多坑（而且我用的是ts），解决完问题后，特在此做个记录。

前端打包&部署

这个不用怎么管，react已经把webpack封装了进去，这里参考这篇文章

build完了之后呢，根目录下会出现build这个文件夹，可以先本地用serve命令启动看一下。

把build文件夹全部丢到服务器上，运行nohup serve -s build -p 8380 > react.log 2>&1 & ，直接启动，公网IP+端口访问成功。
这里我把serve的option整理一下，用serve --help命令也可以看得到。

-v, --version                       Displays the current version of serve
-l, --listen listen_uri             Specify a URI endpoint on which to listen (see below) - more than one may be specified to listen in multiple places
-p                                  Specify custom port
-s, --single                        Rewrite all not-found requests to `index.html`
-d, --debug                         Show debugging information
-c, --config                        Specify custom path to `serve.json`
-L, --no-request-logging            Do not log any request information to the console.
-C, --cors                          Enable CORS, sets `Access-Control-Allow-Origin` to `*`
-n, --no-clipboard                  Do not copy the local address to the clipboard
-u, --no-compression                Do not compress files
--no-etag                           Send `Last-Modified` header instead of `ETag`
-S, --symlinks                      Resolve symlinks instead of showing 404 errors
--ssl-cert                          Optional path to an SSL/TLS certificate to serve with HTTPS                                    
--ssl-key                           Optional path to the SSL/TLS certificate's private key
--ssl-pass                          Optional path to the SSL/TLS certificate's passphrase
--no-port-switching                 Do not open a port other than the one specified when it's taken.

后面两个>和信息输出有关，有兴趣可以看一下链接1 链接2
最后一个& 代表将当前任务放到后台执行，不占用当前窗口（参考）

后端打包

编译方法

一直以为前端才需要打包，到面临这个问题的时候才注意到，后端也需要打包，且可以用webpack。
本项目是ts，在后端代码的根目录下直接输入tsc命令（没有这个命令可以npm i --global typescript)，在根目录下生成了一个dist文件夹：

原以为后端打包已经完成，于是直接丢到了服务器上，才发现并不能运行。其实这里只是把我写的ts代码转化成了js而已，什么依赖都没有。我在开发的时候，使用的是ts-node和nodemon，前者用来代替node命令来执行ts，后者可以让代码“热更新”，运行基于前者。

使用webpack打包

1. 添加webpack.config.js

const path = require('path');
const fs = require('fs')
module.exports = {
  entry: './app.ts',
  devtool: 'inline-source-map',
  module: {
    rules: [
      {
        test: /\.(tsx|ts)?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      }
    ],
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
  target: "node",
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  // externals: ['pg-hstore'],
};

使用import方式请参考此链接

2. 安装webpack，并运行

npm i --global webpack webpack-cli
webpack

另外webpack打包是基于ts-loader的，打包之前安装即可，不过运行时不需要。

3. 生成文件

最终会发现，在dist文件夹下面，出现一个bundle.js文件，大概有十几二十m，直接丢到服务器上用node就能运行了（如果运气好的话）。哦我用的是pm2来代替node命令，后台常驻运行。
看见也有人用nginx运行的，回头可以试下。

webpack编译错误

webpack踩坑如下

1. Can’t resolve ‘pg-hstore’
   这个好像是postgres数据库相关的依赖，但是此项目我并没有使用，不明所以。
   我试用了两个方法，均可行：reference
   1.1 简单粗暴，找不到就安装一个，yarn add pg-hstore
   1.2 在webpack.config.js中添加了externals: [ ‘pg-hstore’]

bundle.js执行错误

1. Sequelize - Please install mysql2 package manually
   mysql2是sequelize连接数据库需要的包名
   我代码运行都是正常的呀，访问数据库没问题，而且运行bundle.js是不需要安装依赖的。
   参考了此贴，问题解决

2. RangeError [ERR_SOCKET_BAD_PORT]: Port should be >= 0 and < 65536. Received NaN
   虽然能运行了，但是报端口错误。
   我使用了.env文件保存系统的重要参数，使用dotenv库进行连接，打包之前能够正常运行，但是这里又提示我找不到，且console不断刷新，我估计是redis连接出了问题，况且在app.ts指定了端口号的前提下，程序又自动寻找了另外的端口。
   经过实验，发现不能读取env文件中应用和redis的端口号（已经使用了parseInt)，但是mysql的可以读取，非常奇怪，干脆直接写死了，当个遗留问题。

推荐阅读

好文