vue/react/web前端项目部署到阿里云服务器_nginx_pm2流程及部署前的准备

前端开发完成的项目，不管是使用vue、react、或者是别的web项目，最终都是要部署到外网上，让用户可以通过域名来访问。这篇文章以一个 react 移动端的项目为例，讲怎样将自己本地的项目部署到阿里云服务器上。

文章比较长，第一次部署项目的大体流程如下：

部署前的准备，项目打包、阿里云服务器准备；本地连接阿里云服务器；服务器安装epel仓库;服务器安装nginx；启动nginx，如果出现无法访问网站，需要检查端口号的配置；上传本地文件到服务器；服务器配置nginx代理；服务器搭建 node 环境；服务器部署Mock数据，使用pm2管理node进程。

1. 部署前的准备

本地要部署的项目。阿里云服务器，服务器操作系统一般都是 CentOS ，版本不要选最新的，容易有问题，选7.5或者7.6都可以。

1.1 项目打包

终端进入到项目根目录，执行npm run build，对项目进行打包，打包成功显示如下，打包完成后在根目录下会生成一个 build 的文件夹（如果是vue项目，会生成 dist 文件夹），部署就是将 build 或者 dist 文件夹里的内容放在公网上。

打包后生成的 build 文件夹及里面的内容。

1.2 登录阿里云后台

登录阿里云后台 => 控制台 => 云服务器ECS => 实例，打开实例管理控制台，阿里云平台登录地址：阿里云登录 - 欢迎登录阿里云，安全稳定的云计算服务平台

2. 本地连接阿里云服务器

方式一：通过阿里云云服务器管理控制台中的远程连接进行连接。

输入用户名（默认为root）、密码（阿里云的登录密码/初始化磁盘时设置的密码），点击确定登录。

登录后看到这个页面说明已经登录成功了。

方式二：本地终端连接

在本地终端中输入下面的命令，服务器用户名默认为root，公网ip在云服务器管理控制台中可以找到。

ssh 服务器用户名@公网ip

输入yes，回车

输入登录密码，输密码的时候，不会显示输入的内容，输完直接回车就行

出现下面这个页面则说明连接成功。

3. 装epel仓库

终端中继续输入下面的命令，安装epel仓库，-y表示一路确认。

yum install epel-release -y

4. 服务器安装nginx

终端中执行下面的命令，安装nginx。出现下面的内容，说明安装成功。

yum install nginx -y

5. 启动nginx

在终端执行下面的命令，启动nginx，执行命令后如果没有报错，则说明执行成功。

1、开启防火墙：systemctl start nginx

2、启动nginx：service nginx start

重启nginx：nginx -s reload

关闭nginx：service nginx stop

nginx 启动成功后，在浏览器中输入主机名（公网ip），看是否启动成功，如果出现下面这个页面，则说明服务器连接成功。

如果出现无法访问此网站，检查是否在阿里云上开通端口，如果没有设置端口号，则网站无法访问。

在阿里云上开通端口：进入实例详情页面 => 本实例安全组 => 点击安全组ID/名称

如果是访问默认端口号，需要配置80端口，点右上角快速创建规则：

按下图填写端口号规则，自定义端口范围太大的话，会不安全，建议指定一个端口。

配置端口后，终端中输入nginx -s reload，重启nginx服务。重启nginx后，在浏览器中输入主机名（公网ip），看是否启动成功。

6. 上传文件到服务器

可以使用 FTP 软件做文件的上传和下载。这里使用的是FileZilla，点击文件 => 站点管理器 => 新建站点 => 输入主机的ip、端口、用户名 => 点击连接 => 输入密码

如果出现连接不成功，检查以下几点：

主机是否正确，应该是外网IP；端口号是否一致，FileZilla的默认端口号是21，检查阿里云后台安全组规则里是否设置了对应的端口；检查用户名和密码是否正确；

连接成功后，如下图所示：

远程站点输入/进入根目录，创建自己的目录，例如www。在www目录下新建项目目录，例如cookbook。将build文件夹里的文件，拖到cookbook目录里。

也可以在终端中输入ll，查看上传记录。

7. 配置nginx代理

在本地创建项目的配置文件，cookbook.conf 文件（内容如下），将项目的配置文件，上传到/etc/nginx/conf.d目录下。

server {#端口号listen 80;#域名或者ipserver_name 39.101.189.250;#文件的路径root /www/cookbook;#配置默认访问的页面index index.html;#配置代理location /api {proxy_pass http://127.0.0.1:3033;}location /apilist {rewrite /apilist/(.*) /$1 break;proxy_pass http://127.0.0.1:3033;}location / {#当输入错误路径时，跳转到index.html页面try_files $uri $uri/ /index.html;}}

如果是一些小改动，也可以直接在终端里对文件进行修改：

使用终端编辑器打开配置文件vim /etc/nginx/conf.d/cookbook.config按i进入编辑模式，就可以修改文件内容了修改完成后按esc按:wq保存刚刚的内容，并退出编辑模式按:q!强制退出，不保存刚刚修改的内容，并退出编辑模式按:q，如果没有对文件进行修改，可以直接退出编辑模式

改完配置文件后，执行nginx -s reload重启 nginx 服务。如果不报错的话，就是重启成功了。重启成功后，在浏览器中输入主机名（公网ip）+端口（需要在阿里云后台配置这个端口号，详细步骤看上面的第5步），看是否能访问项目。

因为在项目里使用了 json-server 做 mock 数据，虽然代理配置好了，但是数据没有部署到服务器上，所以现在只能访问项目的页面，但是访问不了接口。

8. node环境搭建

json-server服务需要在node环境下部署，所以要先在服务器上搭建node环境。

终端中执行下面的命令，在 centOS7 安装node，出现下面的内容说明安装成功：

sudo yum install -y nodejs

使用node -v查看当前使用的 nodeJs 版本，如果版本太旧，可以按照下面的步骤更新nodeJs：

执行npm install -g n安装n模块，n模块是专门用来管理NodeJs的版本输入n -V查看版本，确认是否安装成功，如果没有配置环境变量，在接下来执行的时候需要带上全路径sudo /usr/lib/node_modeles/n/bin/n 10.1指定版本更新nodeJssudo /usr/lib/node_modules/n/bin/n stable更新到nodeJs最新稳定的版本