前端项目阿里云部署

simple丶
63 阅读7分钟

前后端分离部署，后端部署后端服务器的代码，前端将打包好的资源，部署到前端的服务器上面，用户在做请求的时候，从前端服务器请求静态资源，然后从后端服务器获取数据。

目前前端部署静态资源时，大多采用 Node.js 或者 Nginx 来做静态资源部署，我们这里选择 Nginx

1. 阿里云购买服务器

1.1 注册账号

1.2 选择“云服务器 ECS”，点击查看详情

1png.png

1.3 快速购买

2.png

1.4 进入到 Linux 系统后，使用命令来进行操作

ls：查看当前目录下的文件有哪些
exit：退出系统
clear：清屏
touch：创建文件，例如 touch 文件名
mkdir：创建目录，例如 mkdir 目录名称
mv：移动目录或者文件，例如 mv 要移动的文件或者目录 要移动到哪儿
rm -rf 要删除的目录或者文件名：删除目录或者文件
本地连接云服务器：ssh -p 22 <root@xxx.xxx.xxx.xxx>

2. 安装 Node.js

2.1 安装分布式版本管理系统Git

sudo yum install git -y

2.2 使用Git将NVM的源码克隆到本地的~/.nvm目录下，并检查最新版本

git clone https://gitee.com/mirrors/nvm.git ~/.nvm && cd ~/.nvm && git checkout `git describe --abbrev=0 --tags`

2.3 依次运行以下命令，配置NVM的环境变量

sudo sh -c 'echo ". ~/.nvm/nvm.sh" >> /etc/profile'
source /etc/profile

2.4 运行以下命令，修改npm镜像源为阿里云镜像，以加快Node.js下载速度

export NVM_NODEJS_ORG_MIRROR=https://npmmirror.com/mirrors/node

2.5 运行以下命令，查看Node.js版本

nvm list-remote

2.6 安装多个Node.js版本

nvm install 版本号

2.7 查看已安装的Node.js版本

nvm ls

2.8 切换Node.js的版本

nvm use 版本号

3. 安装 Mangodb 社区版

3.1 添加 yum 源

vi /etc/yum.repos.d/mongodb-org-5.0.repo

然后将如下内容添加进去

[mongodb-org-5.0]
name=MongoDB Repository
baseurl=https://repo.mongodb.org/yum/redhat/$releasever/mongodb-org/5.0/x86_64/
gpgcheck=1
enabled=1
gpgkey=https://www.mongodb.org/static/pgp/server-5.0.asc

在 vi 中，按键盘的 i 键是插入内容，插入完毕后按 ESC 退出，然后输入 :wq 保存

首先需要明确的一点：

Alibaba Cloud Linux 2 对应的是 CentOS7

Alibaba Cloud Linux 3 对应的是 CentOS8

//按照官方文档添加了yum源文件，但是当执行`yum install -y mongodb-org`命令的时候报错了：
Error: Failed to download metadata for repo 'mongodb-org-5.0': 
Cannot download repomd.xml: Status code: 404 
for https://repo.mongodb.org/yum/redhat/3/mongodb-org/5.0/x86_64/repodata/repomd.xml

//解决办法就是将`$releasever`变量直接修改为Centos的版本 7，如下：
[mongodb-org-5.0]
name=MongoDB Repository
baseurl=https://repo.mongodb.org/yum/redhat/7/mongodb-org/5.0/x86_64/
gpgcheck=1
enabled=1
gpgkey=https://www.mongodb.org/static/pgp/server-5.0.asc

3.2 执行安装命令

yum install -y mongodb-org

3.3 使用systemctl命令启动MongoDB服务

systemctl start mongod  #启动
systemctl status mongod #查看状态
systemctl restart mongod #重新启动

3.4 MongoDB服务 已启动 3.png

4. 远程链接

4.1 开启阿里云安全组对应端口 点击【配置规则】添加 27017 端口，否则本地电脑无法远程链接数据库

5.png

4.2 阿里云服务器链接云端数据库

mongo

4.png

4.3 创建用户 root 用户在 admin 数据库

use admin # 切换 admin 数据库
db.createUser({user:"root",pwd:"123456",roles:[{role:"userAdminAnyDatabase",db: "admin"}]})

2022-03-29-042940.png

//在 mongodb 中 admin 数据库是一个特别的数据库，这个数据库的用户，可以访问 mongodb 中的所有数据库
//所以接下来在 admin 数据库上面使用刚才的超级管理员登录

use amdin db.auth("root","123456")

2022-03-29-043147.png

//之后为其他数据库设置用户，步骤也是一样的，首先切换到其他数据库，然后创建用户

use 数据库名
db.createUser({user:"用户名",pwd:"密码",roles:[{role:"read",db: "数据库名"},{role:"readWrite",db:"数据库名"}]})

2022-03-29-043633.png

//最后执行
db.auth("用户名","密码")

2022-03-29-043730.png

返回 1，说明登录成功。

至此，我们就在 mysite 数据库上面添加了一个用户，并且设置了账号和密码

4.4 修改 mongodb 的配置文件

vi /etc/mongod.conf

2022-03-29-050403.png

主要就是将 bingIp 修改为 0.0.0.0 ，这样我们本地的电脑才能访问到

//重新启动一下 mongodb，重启命令
systemctl restart mongod

4.5 本地 Navicat 就可以链接云端数据库

ScreenShot_2025-11-01_151007_934.png

5. 上传服务器代码以及数据库数据

5.1 将本地MongoDB 数据库指定数据备份并压缩

mongodump -h localhost:27017 -d mysite -o /Users/simple/Desktop

// 参数说明
-h MongoDB所在服务器地址，例：127.0.0.1，也可指定端口号：127.0.0.1:27017
-d 需要备份的数据库实例 例：mysite
-o 备份数据存放位置 例如：/Users/simple/Desktop 我的桌面

备份指定数据库文件后，进行zip 压缩

5.2 将后端服务代码去除node_modules 后进行zip 压缩

5.3 mac 系统 使用自带的 shell 工具 将压缩包传输给云端指定目录

1.png

2.png

3.png

// 使用命令：put 要上传的文件的地址 远程服务器的具体地址

// 将服务器代码 上传至 云端服务器/usr/local目录下
put /Users/simple/Desktop/mysite-server.zip /usr/local

// 同理，将备份数据zip压缩包也上传至云端服务器
// 将服务器代码 上传至 云端服务器/usr/local目录下
put /Users/simple/Desktop/mysite.zip /usr/local

5.4 远程进入云端服务器至压缩包文件目录进行解压

unzip 指定压缩包文件

cd /usr/local
unzip mysite.zip

1.png

5.5 将上传的备份数据恢复至云端 monggoDB 数据库中

mongorestore -h localhost:27017 -d mysite --dir /usr/local/mysite

// 参数说明
-h MongoDB 所在服务器
-d 需要恢复的数据实例 即：mysite
--dir 云端备份数据所在位置

1.png

恢复成功后，即本地链接的远程服务器即可看到该数据库

5.6 服务器代码解压并安装依赖，启动云端后台服务器

cd /usr/local  //进入上传的后天服务压缩包所在位置
unzip mysite-server.zip //解压后台服务代码
cd mysite-server //进入文件目录
npm install //安装程序依赖
npm start //启动后台服务

1.png

6. 云端安装 Nginx 静态资源服务器

6.1 下载依赖

yum -y install pcre*
yum -y install openssl*

6.2 下载 wget（类似迅雷）

yum install wget

6.3 下载 Nginx

wget http://nginx.org/download/nginx-1.21.1.tar.gz

6.4 解压

tar zxvf nginx-1.21.1.tar.gz

6.5 进入到解压后的目录，编译

./configure

6.6 安装 Nginx

make install

6.6 安装完毕后，会在同级目录生成一个 nginx 的目录，这个即是我们的服务器目录

// nginx 常用命令

cd /nginx/sbin 可执行如下命令

nginx：启动
nginx -v：查看版本
nginx -s stop：停止
nginx -s reload：重启

6.7 通过./nginx启动后，即可通过公网IP 进行访问

1.png

7. 上传静态资源

7.1 打包项目静态资源文件

npm run build #将开发环境文件进行打包生成 dist 文件目录

7.2 将zip压缩后的 dist 文件上传至云端 nginx 服务器目录

// mac系统 通过自带的 shell 将文件上传至云端服务器
put /xx/xx/xx/xx /usr/local/nginx/html
// 远程进入云端服务器目录
cd /usr/local/nginx/html
// 进行解压
unzip xxx.zip
// 解压后进入目录 将文件全部移动至 html 目录下
mv static index.html /usr/local/nginx/html
// 前端后台项目 可以新建 admin 文件夹 将项目放置在该目录下面
mkdir admin

7.3 修改 nginx 的配置文件，文件位于 conf 目录下的 nginx.conf

// 添加代理设置

location / { 
    root html; 
    index index.html index.htm; 
    try_files uri uri/ /index.html; 
}

location /api { proxy_pass http://127.0.0.1:7001; }

location /res { proxy_pass http://127.0.0.1:7001; }

location /static { proxy_pass http://127.0.0.1:7001; }

8. 开启进程守护

//即使我们退出了远程连接，也能够继续保持进程
nohup 命令

//使用示例
nohup npm start &

//挂起进程之后，使用 exit 命令来退出远程连接

9. 域名映射

1.png

2.png

  • 购买完成后，点击【管理我的域名】
  • 进去之后，找到要映射的域名，点击【解析】
  • 进去之后，点击【添加记录】
  • 记录类型选择【A】，主机记录填写【www】，记录值填写【IP 地址】

2021-08-05-081215.png

10. 数据库加密

10.1 mongodb 的配置文件

systemLog:
  destination: file #日志输出方式。file/syslog,如果是file，需指定path，默认是输出到标准输出流中
  path: /usr/local/mongodb/mongod.log  #日志路径
  logAppend: true #启动时，日志追加在已有日志文件内还是备份旧日志后，创建新文件记录日志, 默认false

net:
  port: 27017 #监听端口，默认27017
  bindIp: 0.0.0.0 #绑定监听的ip，设置为127.0.0.1时，只会监听本机
  maxIncomingConnections: 65536 #最大连接数，可接受的连接数还受限于操作系统配置的最大连接数
  wireObjectCheck: true #校验客户端的请求，防止错误的或无效BSON插入,多层文档嵌套的对象会有轻微性能影响,默认true

processManagement:
  fork: true  # 后台运行

security:
  authorization: enabled  # enabled/disabled #开启客户端认证

storage:
  dbPath: /usr/local/mongodb/data/db  # 数据库地址
  journal: 
    enabled: true #启动journal,64位系统默认开启，32位默认关闭
  • 然后在启动 mongodb 的时候，指定读取配置文件：
./mongod --config /usr/local/mongodb/mongodb.conf

查看进程的 PID：
lsof -i:端口号  例如：lsof -i:27017

停止进程
kill -9 PID  例如：kill -9 24311
  • 远程数据库连接时，需要输入账号以及密码

10.2 服务器端代码里面，使用 mongoose 的时候，连接的是有权限的数据库，所以需要修改连接字符串：

连接字符串修改为：
mongodb://username:password@ip:port/database?authSource=admin

例如：
mongodb://testadmin:testadmin123@88.888.88.888:27017/testmongodb?authSource=admin

# 参数说明
# testadmin 用户名称
# testadmin123 用户密码
# 88.888.88.888 服务器地址
# 27017 端口号码
# testmongodb 连接的数据库
# ?authSource=admin 权限来源
# 至此，可以通过 mongoose 连接数据库
avatar
文章
阅读
粉丝