作为学生，一路“白嫖”，手把手教你部署前端项目
对于应届生找工作来说，公司还是很看重项目的完整开发流程的，项目部署还是挺重要的一个环节的。
身为学生，可以"白嫖"到这么多资源，为啥不赶快动手实践一下呢？
购买云服务器 (可以白嫖就白嫖)
因为我是学生，我这里就白嫖了阿里云的服务器了。阿里的飞天加速高校计划
还是可以白嫖几个月的。
这里我选择的是ubuntu 20.04 64位版本的操作系统。
然后下列所有操作都在这个云服务器终端完成了。
在我们安装依赖之前，我们先把操作系统的软件包更新一下。
apt update
apt upgrade
安装nvm
由于我们部署的是前端项目，所以离不开nodejs。为了方便我们切换版本，所以我们可以通过nvm来安装多个版本的nodejs。
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash
当我们安装完后，nvm的配置将会被加入到.bashrc中，所以我们需要重新加载改文件，让nvm命令生效。
source .bashrc
然后就可以通过nvm命令下载nodejs了
nvm install version
nvm list
nvm use version
...
mysql
我们这里的项目使用的数据库是mysql，这里介绍一下mysql相关的配置。
安装
sudo apt update
sudo apt install mysql-server
mysql安装成功后会自动启动，查看是否启动成功。
sudo systemctl status mysql
配置，在本地访问在线数据库
启动成功后，我们就需要修改一下数据库的root密码，让我们可以在本地连接远程数据库，将本地数据上传到数据库中。
- 在服务器安全组中配置mysql连接端口3306
- 将mysql.user表中的root的host改成
%
# 使⽤mysql数据库
use mysql;
# 查看user表中，连接权限，默认看到root是localhost
select host, user from user;
# 修改权限
update user set host = '%' where user = 'root';
- 修改root密码。
ALTER USER 'root'@'%' IDENTIFIED WITH mysql_native_password BY '123';
- 将
/etc/mysql/mysql.conf.d/mysqld.cnf配置文件中的bind-adress属性注释掉。
vim /etc/mysql/mysql.conf.d/mysqld.cnf
遇到的一些错误
- 下方报错是密码强度问题。
- 下方报错是我们修改了root的host。
执行这一步就行
ALTER USER 'root'@'%' IDENTIFIED WITH mysql_native_password BY '123';
- 将配置文件中的
bind-adress注释掉。
sudo vi /etc/mysql/mysql.conf.d/mysqld.cnf
MySQL远程连接报错2003-cant connection to mysql server on ‘IP’（10061 unknown error）
在navicat中连接数据库
然后就可以导入本地数据了。
安装nginx
sudo apt install nginx
安装成功后，直接在浏览器中输入你的公网地址访问，如果成功就证明安装成功。
查看nginx的状态
systemctl status nginx
重启nginx
sudo systemctl reload nginx
上传项目
一般我们都会把项目上传到github，我们就可以在服务器中通过git去克隆该项目了。
安装git
apt install git
克隆项目安装依赖,打包构建等等。
将打包后的文件拷贝到/etc/nginx/html文件下，否则在nginx配置文件中指定root路径后，访问项目时403 Forbidden，禁止访问。
# copy 原路径 目标路径
cp /root/server_blog/vue-blog/dist /etc/nginx/html/vue-blog -r
在nginx部署打包后的静态目录。
在etc/nginx/conf.d目录下新建一个....conf文件，配置nginx配置。
server {
#端口
listen 3001;
#ip地址
server_name 公网ip;
# vue项目存在的目录（替换成你对应的地址，如果你这是用docker部署的请改成你容器内的地址）
root /etc/nginx/html/vue-blog;
location / {
#需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
try_files $uri $uri/ @router;
index index.html index.htm;
}
#对应上面的@router，主要原因是路由的路径资源并不是一个真实的路径，所以无法找到具体的文件
#因此需要rewrite到index.html中，然后交给路由在处理请求资源
location @router {
rewrite ^.*$ /index.html last;
}
}
然后重启nginx服务即可访问。
sudo systemctl reload nginx
购买域名
添加记录
然后配置nginx配置
server {
listen 80;
server_name 域名; # 服务器名称
root /etc/nginx/html/vue-blog;
location / {
#需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
try_files $uri $uri/ @router;
index index.html index.htm;
}
#对应上面的@router，主要原因是路由的路径资源并不是一个真实的路径，所以无法找到具体的文件
#因此需要rewrite到index.html中，然后交给路由在处理请求资源
location @router {
rewrite ^.*$ /index.html last;
}
}
https证书配置
购买完毕后就是申请证书了
等个一分钟以后证书就会生成，这里点击下载即可下载证书。
然后我们可以参照对应下载的服务器的操作文档进行配置。这里我们需要将下载的证书上传到服务器，这里推荐一个vs code插件remote ssh来方便我们在本地操作。在/etc/nginx/cert目录下存放证书。
然后就是更改一下nginx配置了。
#以下属性中，以ssl开头的属性表示与证书配置有关。
server {
#配置HTTPS的默认访问端口为443。
#如果未在此处配置HTTPS的默认访问端口，可能会造成Nginx无法启动。
#如果您使用Nginx 1.15.0及以上版本，请使用listen 443 ssl代替listen 443和ssl on。
listen 443 ssl;
#填写证书绑定的域名
server_name 域名; # 服务器名称
root /etc/nginx/html/vue-blog;
#对应上面的@router，主要原因是路由的路径资源并不是一个真实的路径，所以无法找到具体的文件
#因此需要rewrite到index.html中，然后交给路由在处理请求资源
location @router {
rewrite ^.*$ /index.html last;
}
#填写证书文件名称
ssl_certificate cert/....pem;
#填写证书私钥文件名称
ssl_certificate_key cert/....key;
ssl_session_timeout 5m;
#表示使用的加密套件的类型
ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
#表示使用的TLS协议的类型，您需要自行评估是否配置TLSv1.1协议。
ssl_protocols TLSv1.1 TLSv1.2 TLSv1.3;
ssl_prefer_server_ciphers on;
location / {
#需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
try_files $uri $uri/ @router;
index index.html index.htm;
# 如果是后端服务还需要转发到对应的路径
# proxy_pass http://127.0.0.1:7001; # 转发给3001端口
}
}
我们还 需要将http请求的重定向到https,所以还需要配置这些内容
server {
listen 80;
#填写证书绑定的域名
server_name 域名;
#将所有HTTP请求通过rewrite指令重定向到HTTPS。
rewrite ^(.*)$ https://$host$1;
}
注意当我们通过https协议访问时，我们需要开启443端口。
还有就是由于浏览器的安全策略，https协议下的网站不能请求http协议下的资源。所以我们需要将后端接口也配置一下安全证书。
经过上述相同的步骤，下载对应的ssl证书秘钥，然后配置nginx配置就可以啦。
#以下属性中，以ssl开头的属性表示与证书配置有关。
server {
#配置HTTPS的默认访问端口为443。
#如果未在此处配置HTTPS的默认访问端口，可能会造成Nginx无法启动。
#如果您使用Nginx 1.15.0及以上版本，请使用listen 443 ssl代替listen 443和ssl on。
listen 443 ssl;
#填写证书绑定的域名
server_name service.haomiao.love; # 服务器名称
#填写证书文件名称
ssl_certificate cert/service/10039014_service.haomiao.love.pem;
#填写证书私钥文件名称
ssl_certificate_key cert/service/10039014_service.haomiao.love.key;
ssl_session_timeout 5m;
#表示使用的加密套件的类型
ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
#表示使用的TLS协议的类型，您需要自行评估是否配置TLSv1.1协议。
ssl_protocols TLSv1.1 TLSv1.2 TLSv1.3;
ssl_prefer_server_ciphers on;
location / {
proxy_set_header X-Real-IP $remote_addr;
# 后端的web服务器可以通过 X-Forwarded-For 获取用户真实IP
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
# 获取真实的请求主机名
proxy_set_header Host $http_host;
# 标识该请求由 nginx 转发
proxy_set_header X-Nginx-Proxy true;
# 代理到本机的7001端口服务
proxy_pass http://127.0.0.1:7001;
}
}
server {
listen 80;
server_name service.haomiao.love; # 服务器名称
#将所有HTTP请求通过rewrite指令重定向到HTTPS。
rewrite ^(.*)$ https://$host$1;
}
域名备案
由于国内申请的域名都需要备案。否则无法使用域名访问，所以我们在购买域名后的2-3天后可以申请域名备案。
填写一些信息并上传证件照就行了。
结束语
linux和nginx的学习可以访问这里