挣钱宝前端安装部署指南

负责人：邱奕浩 审核人：邱晓裕

挣钱宝是一个用于发布有偿问卷的工具，采用react框架实现。本文件将一步步地给出应用的本地安装方法和云服务器部署的详细。

安装步骤

本安装教程支持 windows 系统，linux 系统未测试。

以下命令的目的是在本地运行react应用。

登录 node.js 官网，下载 node.js 安装包进行本地安装。

目前测试过的最低版本为v.8.11.3 ，建议下载10.16.0。

git clone git@github.com:software-system-analysis-and-design/zhengqianbao_frontend.git
cd zhengqianbao_frontend

npm install

npm start

打开浏览器，进入localhost:3000访问前端页面。

本地部署步骤

支持 windows linux 系统。

本地部署比较简单，我们将应用部署在局域网内，局域网内的相连通主机可以访问。

以下命令均在项目的根目录下进行。

npm run build 

npm install -g serve

serve -s build

运行成功，我们会看到以下界面：

第二个是我们的局域网IP，可以互ping联通的主机可以访问这个IP访问应用界面。（可能需要关闭防火墙~)

但这个办法由于没有提供公网 IP ，所以外网要进行访问，还是要将项目部署到云端，通过公网 IP 来访问。

以下是云端部署应用的步骤介绍。

云端部署步骤

本部署教程支持 linux 系统。

这一部分将介绍如何利用Docker、 Nginx 将React项目部署到云服务器上。

npm run build

接下来我们需要把把build文件夹部署到云服务器上，通过一个公网IP来访问我们的前端页面。

关于如何详细的选购服务器并在云端进行React的应用部署，可以看我的另外一篇博文——使用 Docker、Nginx部署一个简单React Demo到云服务器上。以下命令内容均摘抄自此博文，方便快速部署。

说明一下，这里选择的腾讯云的服务器，系统是CentOS7.6。

我们首先需要配置Docker环境，安装过程参考自官网CentOS教程。

  1. 配置Docker存储库。
// 安装必要的包
sudo yum install -y yum-utils \
		device-mapper-persistent-data \
  		lvm2
 
// 配置稳定版的docker仓库
sudo yum-config-manager \
    --add-repo \
    https://download.docker.com/linux/centos/docker-ce.repo
  1. 安装Docker CE 社区版。
sudo yum install docker-ce docker-ce-cli containerd.io
  1. 测试Docker是否安装成功。
sudo systemctl start docker
sudo docker run hello-world
  1. 安装容器管理工具 Compose。
sudo curl -L "https://github.com/docker/compose/releases/download/1.22.0/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose

sudo chmod +x /usr/local/bin/docker-compose
  1. 测试Compose是否安装成功。
docker-compose --version
  1. 传输项目相关文件。

在云服务器上建立一个文件夹用于存放build文件夹和docker-compose.yml, nginx.conf。

我们将项目中的build、docker-compose.yml、 nginx.conf都传输到服务器上。

如何传输？建议使用WinSCP 图形化工具进行传输，终端可使用scp命令传输。

建立的目录结构像这样：

App
  |__ build
  |__ docker-compose.yml
  |__ nginx.conf
  1. 运行命令部署。

在App文件夹的路径下，运行以下命令完成Docker容器的创建和Nginx的部署。

docker-compose up -d

创建容器成功后，我们就可以在通过公网IP:80 来访问应用啦。

比如你的服务器IP是123.456.123.456 ，那么你就可以通过123.456.123.456:80访问挣钱宝应用啦。

如果你要关闭容器，那么你可以运行以下命令。

docker-compose down

到此位置项目就部署成功啦。

以下是本项目部署成功的截图~