前端部署

tip

我们建议通过 docker 部署,解决环境安装的烦恼

准备前端部署环境

  1. 首先,通过命令行安装 Node.js 的二进制文件。
  1. $ wget https://nodejs.org/dist/v16.14.0/node-v16.14.0-linux-x64.tar.xz
其他版本安装

这里安装的 Node.js 的版本为 v16.14.0, 如果需要下载不同的版本或其他平台的 Node.js 安装包,可以通过 https://nodejs.org/zh-cn/download/ 查询其他版本。

我们建议 Node.js 的版本在 12.18.0 及以上。

  1. 下载完成后,解压源码文件
  1. $ xz -d node-v16.14.0-linux-x64.tar.xz
  2. $ tar xvf node-v16.14.0-linux-x64.tar
  1. 安装完成后,编辑环境变量
  1. $ vim /etc/profile

打开 vim 编辑器后,在文件最下面粘贴如下内容:

  1. #set for nodejs
  2. export NODE_HOME=/usr/local/node/16.14.0
  3. export PATH=$NODE_HOME/bin:$PATH

通过 :wq 保存并退出,退出后执行如下命令使之生效:

  1. $ source /etc/profile
  1. 验证安装

通过执行 node -v 是否输出 Node.js 的版本信息判断是否安装成功。

  1. $ node -v
  2. v16.14.0
note

我们推荐使用 yarn 来管理前端项目依赖

  1. 安装 yarn

安装 Node.js 的同时,会安装 npm,我们通过 npm 来安装 yarn.

  1. $ npm -v
  2. 6.14.13
  3. $ npm install -g yarn

安装完成后,通过以下命令确认是否安装成功

  1. $ yarn -v
  2. 1.22.10

安装项目依赖

将当前路径切换到 taier-ui 文件夹下,然后执行 yarn 开始安装项目依赖

  1. $ pwd
  2. ~/Your-Project-Path/Taier/taier-ui
  3. $ yarn
切换淘宝源

国内用户在安装依赖的时候会比较慢,可以在安装之前将 yarn 的源换成淘宝源.

  1. $ yarn config set registry https://registry.npm.taobao.org/

安装完成后,当前路径下会新增 node_modules 文件夹 和 yarn.lock 文件,前者是保存当前项目的依赖,后者是记录当前项目的依赖的版本信息。

安装依赖成功后,执行 yarn build 对项目进行编译。

  1. $ yarn build

项目编译完成后,会将编译后的结果存放在当前目录的 dist 文件夹下,

  1. ./
  2. ├── README.md
  3. ├── cup.config.js
  4. ├── dist # 编译结果文件
  5. ├── node_modules # 项目依赖
  6. ├── package.json
  7. ├── pom.xml
  8. ├── public
  9. ├── scripts
  10. ├── src
  11. ├── tailwind.config.js
  12. ├── tsconfig.json
  13. ├── typings.d.ts
  14. └── yarn.lock

然后这里我们借助 mini-cuppm2 的能力来启动服务器,首先先全局安装 mini-cuppm2.

  1. $ yarn global add pm2 mini-cup
info

PM2 is a production process manager for Node.js applications with a built-in load balancer.

mini-cup is a lightweight web server for web applications.

安装完成,就可以通过在 taier-ui目录下执行以下命令来启动服务:

  1. $ pwd
  2. /Your-Project-Path/Taier/taier-ui
  3. $ pm2 start cup

执行命令后,打开浏览器输入 http://localhost:8080/ 即可看到页面。

caution

建议开发人员通过修改 hosts 进行开发

该命令会查找当前目录下的 cup.config.js 文件,并将该文件作为配置文件启动服务器,该文件内容如下:

cup.config.js

  1. const publicURL = "http://taier.dtstack.cn"; // 跳转到后端部署的目录
  2. module.exports = {
  3. name: "taier",
  4. listen: 8080, // 服务启动端口
  5. root: "./dist", // 服务启动的根目录
  6. proxyTable: {
  7. // 服务启动后的请求代理转发
  8. "/taier": {
  9. target: `${publicURL}:8090`,
  10. changeOrigin: true,
  11. secure: false,
  12. },
  13. },
  14. };
caution

mini-cup 服务器仅用作本地快速部署,在实际生产环境中,我们推荐使用 nginx 作为代理服务器。

如果您想要使用 nginx 作为代理服务,这里提供一份配置文件仅供参考

taier.conf

  1. upstream taier{
  2. server Your-Server-IP:Your-Server-PORT;
  3. }
  4. server {
  5. listen *:80;
  6. listen [::]:80;
  7. # The host name to respond to
  8. server_name .taier.dtstack.com .taier.dtstack.cn;
  9. client_max_body_size 100m;
  10. proxy_set_header cache-control no-cache;
  11. proxy_ignore_headers Cache-Control Expires;
  12. proxy_set_header Referer $http_referer;
  13. proxy_set_header Host $host;
  14. proxy_set_header Cookie $http_cookie;
  15. proxy_set_header X-Real-IP $remote_addr;
  16. proxy_set_header X-Forwarded-Host $host;
  17. proxy_set_header X-Forwarded-Server $host;
  18. proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  19. location / {
  20. proxy_set_header X-Real-IP $remote_addr;
  21. proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  22. proxy_set_header Host $host;
  23. proxy_pass http://Your-address-ip:8080;
  24. }
  25. location /taier {
  26. proxy_set_header X-Real-IP $remote_addr;
  27. proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  28. proxy_set_header Host $host;
  29. proxy_pass http://taier;
  30. }
  31. }