⼿把⼿学会⽹站部署（前后端）
⽹站上线部署
疑问：
⽤户是怎么访问到的我们开发好的⽹站的？
我们的项⽬开发完毕之后是怎么上线的？
实际开发过程当中，项⽬上线的活⼉要前端程序员来做吗？-----不需要
⼀、⽹站运⾏机制
1. 名词解释
域名
域名俗称⽹址，是由⼀串⽤点分隔的名字组成，⽤于标识互联⽹上的计算机。
原本⽤于标识互联⽹上计算机使⽤的是 IP 地址，但是由于 IP 地址不便于记忆，所以⼈们便设计出来⽐
较容易记忆的域名，然后通过 DNS 将域名和 IP 地址关联，这样⼈们便可以通过记忆域名直接访问到对应的计算机。
DNS 服务器
DNS (Domain Name System)，可以理解为互联⽹上的⼀项服务，他可以将域名转换成其对应的 IP 地址。
可以将其理解为字典，字典中存储的就是域名和 IP 地址⼀⼀对应的键值对。
本地 hosts ⽂件
windows: c:\windows\system32\drivers\etc\hosts
mac: /etc/hosts
服务器
服务器其实就是⼀台计算机，但是这台计算机并和我们⾃⼰的的 PC 不⼀样，不是⽇常使⽤的，⽽是提供某项互联⽹服务的。
⽐如 web 服务器，能为我们提供⽹页服务，email 服务器，能为我们提供电⼦邮件服务，FTP 服务器能为我们提供⽂件存储服务等等。
为计算机安装不同的服务应⽤程序，即可提供相应的服务。
常见的web 服务应⽤程序： Apache、Nginx、IIS、Node.js
2. ⽹站请求流程（简化版）
静态页⾯
⽹页只请求和响应简单的 HTML、CSS、JavaScript ⽂件，未和服务端进⾏任何数据通信。这样的页⾯叫做静态页⾯。
动态页⾯
页⾯内有和服务器进⾏数据通信，这样的页⾯叫做动态页⾯。
前后端分离的页⾯
前后端分离的项⽬中，页⾯中的数据渲染是在浏览器中完成的。
前后端分离的页⾯请求分为两部分：静态页⾯请求 + ajax 数据请求
前后端不分离的页⾯
前后端不分离的项⽬中，页⾯中的数据渲染操作是在服务器端完成的。
前后端不分离的页⾯⼀次请求就能完成。
⼆、⽹站上线部署流程
1. 服务器购买
国内服务器：阿⾥云 ECS(Elastic Compute Service)，腾讯云 CVM(Cloud Virtual Machine) 等
国外服务器：⽇本 , 美国 Linode, ⾕歌云，微软 Azure，亚马逊 AWS 等
这⼀步需要创建好服务器实例，分配好外⽹ IP 地址。
这⾥使⽤的是⽇本的Vultr（便宜）
2. 域名购买
国外： Godaddy
3. 域名解析（配置 DNS）
注册好域名之后需要将域名映射到⾃⼰服务器对应的 IP 地址，这样别⼈才能通过域名访问到我们的服务器。
使⽤通配符 *，@ 配置域名
4. 服务器环境搭建
配置服务器，Mac 系统下直接⽤终端就ok
windows下需要⽤到 git bash（windows下的仿linux命令⾏⼯具）, 或者别的⼯具（Putty）
需要⽤到的 Linux 系统操作命令
# 远程连接命令
ssh root@域名
# 展⽰当前⽂件夹路径
pwd
# 创建⽂件夹
mkdir ⽂件夹名
# 创建⽂件
touch ⽂件名
# 切换⽂件夹⽬录
cd ⽬录路径
# 展⽰当前⽂件夹中内容
ls
# 编辑⽂件
vim ⽂件路径
# 保存⽂件并退出
:wq
# 传输⽂件
scp 本地⽂件路径 root@域名：远程路径
# 解压⽂件命令
unzip
4.1 安装 CentOS 开发⼈员相关包
mysql下载的zip版本安装步骤
yum groupinstall 'Development tools'
####4.2 配置免密登陆
# 在⾃⼰电脑上⽣成本地秘钥对
ssh-keygen -t rsa
# ⽣成的位置
# mac 在 ~/.ssh
# windows 在 C:\users\你的⽤户名\.ssh
# 在服务器创建了⼀个.ssh ⽂件夹
mkdir .ssh
# 切换到这个⽂件夹
cd .ssh
# 创建了⼀个⽂件
touch authorized_keys
# 我们把⾃⼰电脑上的 id_rsa.pub ⽂件中的内容放到 authorized_keys⽂件中
echo "cqHuvyGI2EXH5EOT/wsjIlNqH6kRaGRzLOcYAoYyn+0nsPhEfFOkv1cii9Ax9naeJuw78LapaX
xmGgkcBWdk2W1KXkL5tPIZUIZAfwJ4PihDQ+0rUj5Yar741NvZYNYZ+xa1RBeziR3gbwdTLPV22Et9TTiLVEY0bNXxgvI1GGvT87f+sFB5hEB0H # 退出服务器，下次直接就能免密登陆了
exit
4.3 安装Nginx
# 添加 Nginx 源
sudo yum install epel-release
# 安装 Nginx
sudo yum install nginx
# 启动 Nginx
nginx
# 配置防⽕墙规则（防⽕墙默认允许的是22端⼝，添加80和443端⼝）
sudo firewall-cmd --permanent --zone=public --add-service=http
sudo firewall-cmd --permanent --zone=public --add-service=https
sudo firewall-cmd --reload
4.4 安装Node.js
# yum⾃带源中没有Node.js，所以⾸先要获取Node.js资源：
curl --silent --location desource/setup_14.x | bash -
# 安装 Node.js
yum install -y nodejs
# 安装完成之后使⽤如下指令测试安装是否成功
node -v
# 安装pm2 node.js程序管理⼯具
（⼀旦node进程报错，会尝试重启，保证我们代码⼀直在线，不会出现宕机的情况）
npm i pm2 -g
# 使⽤pm2 启动node.js项⽬
pm2 start ⽂件名（如app.js）
# 停⽌
pm2 stop ⽂件名或者id
# 从pm2的管理列表中删除
pm2 delete ⽂件名或者id
4.5 安装MySQL
# 下载并安装 MySQL 源
wget sql/arch.rpm
sudo yum arch.rpm
# 安装 MySQL
sudo yum install mysql-community-server -y
# 如果上⼀步报错执⾏下⾯的语句之后再次执⾏⼀下上⾯的安装Mysql的语句
sudo yum module disable mysql
# 启动MySQL
sudo systemctl start msyqld
# 到默认密码
# MySQL安装完毕之后会⾃动设置⼀个默认密码，我们需要到默认密码
grep 'temporary password' /var/log/mysqld.log
# 连接到MySQL数据库，修改密码
mysql -uroot -p
# 修改原来的密码
ALTER USER 'root'@'localhost' IDENTIFIED BY '123456';
# 退出mysql
quit
5. 准备⽹站资源
使⽤vscode⼯具，yarn或者npm包管理⼯具。需要准备好原始项⽬并打包好（build）之后的代码。#安装前端代码依赖
npm i
#进⾏打包，打包完项⽬中会有⼀个dist⽬录，将dist⽂件夹进⾏压缩得到dist.zip
npm run build
6. 上传⽹站资源
可以使⽤scp命令，也可以安装 FTP （vsftpd）⼯具。
## scp 本地⽂件 root@域名：远程路径  ~ 根⽬录的意思
scp ./dist.zip root@xxx:~/
# 查看服务器中是否有Nginx⽂件夹
ls /home/nginx
# 在服务器创建⽂件夹
mkdir /home/nginx/
# 把⽹页⽂件移动到创建好的⽂件夹⾥
mv ./dist.zip /home/nginx/
# 解压压缩⽂件
cd /home/ningx
unzip ./dist.zip
# 删除压缩包
rm dist.zip
# 修改⽂件夹名字
mv dist ilovefe
# 结果就是  /home/nginx/ilovefe  这个⽂件夹中放的就是我们的⽹页⽂件了
7. 配置Nginx
创建⼀个f⽂件，告诉Nginx在哪⾥拿对应⽂件
cd /etc/nginx/conf.d
# 创建配置⽂件
f
f
# 按i键进出插⼊模式
# 复制下⾯的内容，粘贴进去
server {
listen      80;
server_name  ilovefe;
location / {
root  /home/nginx/ilovefe;
index  index.html index.htm;
}
}
# 保存退出
# 按⼀下esc退出编辑模式
# 然后输⼊下⾯的内容敲回车
:wq
# 需要对Nginx重启
systemctl stop nginx
nginx
截⽌⽬前可以访问页⾯，但是接⼝数据还不能请求，接着接⼝项⽬部署步骤
server {
listen      80;
server_name  ilovefe;
location / {
root  /home/nginx/ilovefe;
index  index.html index.htm;
}
}
8.准备后端资源
修改后端项⽬中的mysql对应的password（如在config中配置的数据库链接）
# 修改后端项⽬中的mysql对应的password（如在config中配置的数据库链接）
port: 3000,
database: {
DATABASE: 'vuesql',
USER: 'root',
PASSWORD: '123456',
PORT: '3306',
HOST: 'localhost',
},
jwt_secret: 'ddff0a63e06816ddd7b7d2e2ebc1e40205',
};
#上传后端代码压缩包
scp ./video-admin-master.zip root@ilovefe:~/
# 在服务端查看
ls
# 移动zip⽂件
mv video-admin-master.zip /home/nginx/
# 进⼊ /home/nginx
cd /home/nginx
# 解压并删除压缩包
unzip video-admin-master.zip
rm -rf __MAXCOSX/
rm -rf video-admin-master.zip\
# 改名称
mv video-admin-master.zip ilovefeadmin
# 进⼊ilovefeadmin/
cd ilovefeadmin
9. 接⼝项⽬部署步骤
1. 修改本地配置⽂件中的 mysql 数据库密码（上⾯已完成）
2. 上传项⽬压缩⽂件到服务器（已完成）
3. 在服务器上解压项⽬⽂件到 /home/nginx/ilovefeadmin（已完成）
4. 为项⽬安装依赖项 npm i
5. 进⼊到服务器端数据库 mysql -uroot -p
6. 输⼊密码 123456
7. 修改mysql数据库密码规则（由于后端管理项⽬中，接⼝⽤的是koa中的插件链接数据库的，版本密码规则⽐较低，⽽服务器中数据库版本⽐较⾼，所以不兼容，降低服务
端数据库版本，修改数据库密码规则。）
use mysql;
# 修改过期时间
ALTER USER 'root'@'localhost' IDENTIFIED BY '123456' PASSWORD EXPIRE NEVER;
# 修改密码规则
ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY '123456';
# 查看是否已经修改成功
select user,host,plugin from user where user='root';
8. 创建新的数据库
create database vuesql;
# 扩展
导⼊数据库数据
# 退出数据库
quit
9. 使⽤pm2 启动ilovefeadmin项⽬
pm2 start index.js
此时后端代码已经在运⾏
但是当前端页⾯请求数据时（www.ilovefe/api），nginx还是去的ilovefe⽹站的根⽬录，没有转发到node.js中，因此需要做nginx代理，让以api开头的请求转发到node.js
10. 在之前的nginx配置⽂件中添加反向代理的配置：
# 进⼊到nginx配置⽂件中
cd /etc/nginx/conf.d/
# 查看⽂件状态
ls
# 编辑⽂件并且按o（字母o）键进⾏编辑
f
# 在location代码下⾯添加⼀下代码（注意不是覆盖）
location ^~ /api/ {
rewrite  ^/api/(.*)$ /$1 break;
proxy_pass  127.0.0.1:3000;
}
# 退出
esc
:wq
# 重新启动nginx
nginx -s reload
10.部署后端管理项⽬（前后端不分离项⽬）# 进⼊到conf.d⽬录下
# 查看⽬录
ls
# 复制f，命名为f
f
#编辑f
f
#配置⽂件f
server {
listen      80;
server_name  admin.ilovefe;      (后台管理系统)
location / {
proxy_pass  127.0.0.1:3000;
}
}
# 退出
esc
:wq
# 重启
nginx -s reload
# 到⽹页端登录后台管理系统
admin.ilovefe
# 账号密码
账号：admin
密码：admin
# 在页⾯上传数据

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。