云服务器快速部署前端页面

以阿里云为例：申请服务器 https://www.aliyun.com/minisite/goods?userCode=jpvem2a1

一、 安装操作系统（需要停止服务）

在实例中停止，重新配置，初始化磁盘（不要选择最新的镜像）

选择服务器系统.png

二、 添加安全组对象

常用端口处勾选的是ECS实例上运行的应用需开放的端口。

添加安全组对象.png

三、 初始化时，在ECS的实例中修改密码，重启

• 登录成功后提示界面

登录成功.png

注意：SSH登录可能遇到的错误

• 本地主机key发生变化的提示

本地主机key发生变化.png

• 解决方案：输入yes,直接输入密码或输入以下命令

ssh -o StrictHostKeyChecking=no 192.168.xxx.xxx

• 警告：REMOTE HOST IDENTIFICATION HAS CHANGED

登录错误.png

• 解决方案：

在警告目录下（C:\User\Administrator\.shh\known_hosts）下删除之前的记录

删除记录.png

四、安装epel仓库

-y表示一路都确定

yum install epel-replease -y

五、配置nginx

• 安装

yum install nignx -y

systemctl start nginx
service nginx start

• 添加80端口安全组规则

添加安全组规则.png

• 启动nginx

启动nginx.png

• 验证启动是否成功

浏览器访问服务器外网IP，看到如下提示则配置成功。

welcome to centos.png

• 切换nginx目录

cd /etc/nginx/

• 查看目录文件

ls或ll

• 查看nginx.conf文件

编辑：输入小写字母i

退出：按ESC，输入指令:q!，回车，就不保存修改强自退出vi了 ; 若要保存修改，输入 :wq

vim nginx.conf

conf.d.png

六、 新建站点，更新密钥（以FileZilla为例子）

新建站点.png

• 连接成功

连接成功.png

• 在远程站点创建目录（例：/www）

创建目录.png

• 在/www下创建文件夹，并上传（拖动）打包后的项目文件到服务器

上传打包文件.png

• 将服务器中的/etc/nginx/下的nginx.conf文件拖动到本地目录

nginx.conf.png

• 检查添加配置项(36行)

include /etc/nginx/conf.d/*.conf;

• 根据需要，配置nginx代理服务（*.conf）

server {
  #监听端口
  listen 8055;
  #服务器ip或域名
  server_name 47.94.145.***;
  #文件的路径
  root /www/cookbook;
  #配置默认访问的页面
  index index.html;
  #代理
  location /api {
    # rewrite /api/(.*) /$1 break;
    proxy_pass http://127.0.0.1:8088;
  }
   location /apilist {
    rewrite /apilist/(.*) /$1 break;
    proxy_pass http://127.0.0.1:8088;
  }

location / {
  try_files $uri $uri/ /index.html;
 }
}

• 将修改后的文件，上传到/etc/nginx/conf.d下
• 重启服务器

nginx -s reload

• 浏览器输入域名或ip即可查看

另: 需要配置mock数据时

• 在服务器/www/下新建mock文件并上传数据

上传mock数据.png

七、 安装Node

• 修改yum源为国内的yum源(以centos7为例 ，修改为阿里的yum源)
• 进入yum源配置目录

cd /etc/yum.repos.d/

• 备份本地yum源

mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo_bak

• 获取阿里yum源配置文件

wget -O /etc/yum.repos.d/CentOS-Base.repo http://mirrors.aliyun.com/repo/Centos-7.repo

• 生成yum源缓存

yum makecache

• 更新yum源，等待更新完毕即可

yum -y update

• 安装node

curl --silent --location https://rpm.nodesource.com/setup_10.x | sudo bash -
sudo yum install -y nodejs

• 更新后的node下载速度

阿里yum源下载速度.png

• 查看版本

node -v

八、安装json-server

• 切换淘宝镜像

npm config set registry http://registry.npm.taobao.org/
npm install -g json-server

• 验证是否成功

json-server -h

• 启动mock数据

cd /www/
json-server ./mock/mock.js -p 8088 -r ./mock/router.json  -s ./mock/public/ -w ./mock/swipper.json

• 安装node进程管理工具官网链接

npm install pm2 -g
pm2 start process.json

• 验证pm2安装

pm2 list

• 配置process.json并上传至服务器/www/目录下

args中的命令没有json-server ; 路径改为绝对路径（从root下开始）

{
  "apps": [
    {
      "name": "mock-api",
      "script": "json-server",
      "args": "/www/mock/mock.js -p 8088 -r /www/mock/router.json  -s /www/mock/public/ -w /www/mock/swipper.json"
    }
  ]
}

• 切换至/www/目录下，启动pm2

pm2 start process.json