作为一名前端开发，之前我也是一直对上线部署不太了解 然后我找了相关的资料，做了以下的一些总结笔记，希望对大家有用，如果有所作用的话 也希望大家能给个支持，谢谢大家
简短介绍
浏览器 通过 域名 找到对应 服务器 的流程
浏览器将 域名 传到 DNS服务器中找对域名对应的 网络地址 返回给浏览器，然后通告网络地址 找到web服务器
服务器 就是电脑主机 （web服务器、文件服务器、图片服务器、FTP服务器）安装的软件不同
本地hosts文件讲解(先于DNS服务器)
域名解析 在DNS服务器中进行
hosts文件 可以起到域名解析作用
- 路径
windows: C:\windows\system32\drivers\etc\hosts
mac: /etc/hosts
静态网页的请求流程
Nginx 提供网页服务
Nginx 等待接收访问请求 =》然后找到网站根目录=》找到对应的index.html 转发到浏览器端
多个域名可以指向同一个服务器的说明
多个域名可以同时指向同一个地址（网站根目录可以有多个）
跨域情况下接口请求的处理
nodejs（java/php/nodejs/） 、mysql
- 数据请求的过程
浏览器通过ajax 向对应服务器发送请求=》后端 nodejs 监听对应的接口=》然后从mysql 数据库中获取数据 =》 然后返回给前端
1 返回cors
2 JSONP
3 反向代理
使用反向代理后的接口请求流程
浏览器给Nginx 发送获取数据的请求 =》Nginx 将请求转发给本台服务器上的 后端服务 =》后端服务=》找mysql拿数据返回给后端服务=》后端服务将数据交给Nginx 转发给浏览器
Nginx 做一个配置区分 是获取数据接口 还是获取网页
前后端不分离的页面请求过程
浏览器发送请求=》后端服务=》后端服务在mysql拿数据=》然后后端服务将数据放到网站根目录中的模板里=》后端服务将渲染好数据的模板发送到浏览器
网站上线部署流程
1、服务器购买
国内服务器：阿里云 ECS，腾讯云 CVM
国外服务器：日本 Vultr ，美国 Linode ，谷歌云， 微软 Azure 亚马逊 AWS
创建好服务器实例，分配好外网IP地址。
2、域名购买
国内：万网（阿里）、腾讯
国外：Godaddy
3、域名解析
注册号域名之后需要将域名映射到自己服务器对应的IP地址，这样别人才能通过域名访问到我们的服务器。
这个步骤叫做域名解析，通过域名服务商提供的后台就可以操作，一般域名解析都会有延迟，不是即时生效的
4、服务器环境搭建
配置服务器
mac 系统直接用终端
windows 需要用到git bash 别的工具（Putty）
需要用到Linux系统操作命令
# 远程连接命令
ssh root@域名
# 展示当前文件夹路径
pwd
ls 显示当前目录下的文件结构
cd 切换路径 cd / 切换到根目录
4.1 安装CentOS开发人员相关包
yum groupinstall 'Development tools'
4.2安装Nginx
# 添加Nginx 源
sudo yum install epel-release
# 安装 Nginx
sudo yum install nginx
# 启动 Nginx
sudo systemctl start nginx
# 配置防火墙
sudo firewall-cmd --permanent --zone=public --add-service=http
sudo firewall-cmd --permanent --zone=public --add-service=https
sudo firewall-cmd --reload
4.3安装Node.js
# yum 自带源中没有Node.js 所以首先要获取Node.js资源
curl --silent --location https://rpm.nodesource.com/setup_14.x | bash -
# 安装 Node.js
yum install -y nodejs
# 安装完成之后使用如下指令测试安装是否成功
node -v
# vim 文件名 # 编辑XX文件
# npm i pm2 -g #安装进程管理工具
pm2 start XXX脚本 #运行xxx脚本
pm2 stop XXX脚本 #停止xxx脚本 可用文件名或者是id
# 从pm2管理列表中删除
pm2 delete 文件名或者id
4.4 安装MySQL
# 下载并安装 MySQL 源
wget https://dev.mysql.com/get/mysql80-community-release-el7-7.noarch.rpm
sudo yum localinstall mysql80-community-release-el7-2.noarch.rpm
# 安装MySQL
sudo yum install mysql-community-server -y
# 如果上一步报错 执行下面的语句
sudo yum module disable mysql
# 启动MySQL
sudo systemctl start mysqld
# 找到默认密码
# MySQL安装完毕之后会自动设置一个默认密码，我们需要找到默认密码
grep 'temporary password' /var/log/mysqld.log
# 链接到MySQL数据库，修改密码
mysql -uroot -p
ALTER USER 'root'@'localhost' IDENTIFIED BY '密码'
# quit 退出
4.5免密登录
# 在自己电脑上生成本地 秘钥对
ssh-keygen -t rsa
# 生成位置
# mac 在 ~/.ssh
# windows 在 C:\uers\你的用户名.ssh
# mkdir 文件夹名
# touch 文件名
# echo '文件内容' >> 文件名
5、部署项目
5.1 打包vue项目并上传到服务器
npm i 安装modules
然后 yarn build 或者是npm run build 得到dist文件夹 压缩
# windows 打开git bash 将dist压缩包上传到服务器
scp ./dist.zip root@域名 ：~/
链接好远程服务器
# 将dist压缩包放到nginx目录中
mkdir /home/nginx //创建/home/nginx 文件夹
mv dist.zip /home/nginx/ //将dist压缩包放到/home/nginx文件夹下
unzip dist.zip //解压dist.zip 压缩包
rm dist.zip //删除dist.zip 压缩包
mv dist xxx //将dist文件名改为xxx
5.2 配置Nginx
//首先跳转到Nginx/conf.d文件中
cd /etc/nginx/conf.d/
//创建配置文件
touch 域名.conf
vim 域名.conf
// 按i键进入插入模式
//复制下面的内容粘贴进去
//保存退出
:wq
域名.conf
server{
listen 80;
server_name 域名.com;
location / {
root /home/nginx/域名;
index index.html index.htm;
}
}
systemctl stop nginx // 停止nginx
nginx //重启nginx
5.3 上传和部署接口项目
接口项目是整个项目压缩放到服务器上，
并且 在压缩之前 需要修改config中 database中的password 需要和服务器中的数据库password 是一致的
上传步骤和前端上传压缩包一致
1.cd 到接口项目中
2.安装依赖项 npm i
3.修改MySQL数据库 密码规则
use mysql;
ALTER USER 'root'@'localhost' IDENTIFIED BY '密码' PASSWORD EXPIRE NEVER；
ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY '密码'；
# 查看是否已经修改成功
select user,host,plugin from user where user='root'
4.创建新的数据库
create database (数据库名)vuesql
5.在之前nginx配置文件中添加反向代理的配置
按o键
location ^~/api/ {
rewrite ^/api/(.*)$ /$1 break;
proxy_pass http://127.0.0.1:3000;
}
nginx -s reload //重启nginx
5.4后端管理系统的配置
cp 文件1 文件2 //复制文件1 生成文件2
对应的文件
server{
listen 80;
server_name admin.域名.com;
location / {
proxy_pass http://127.0.0.1:3000;
}
}
