前端项目部署

注：我这边讲解的是mac版的，window系统可能会有所差别，使用腾讯云服务器。

我们通过ssh的方式登入服务器

1.生成ssh key,执行如下两行命令，查看是否有id_rsa id_rsa.pub两个文件，如果有则可以跳过第二步

cd ~/.ssh
ls

2. 生成 ssh key

ssh-keygen -t rsa -C "your_email@example.com"
your_email@example.com: 填你自己的邮箱，一般是绑定代码仓库（gitee,github等）的邮箱
接下来要求输入文件名，一般为 id_rsa

Generating public/private rsa key pair.
Enter file in which to save the key (/Users/xiangxiang/.ssh/id_rsa): id_rsa
1
2

之后要求你输入密码，我们一般不设置，一直回车就行，当看到这个图片代码你设置成功了。

3.登入腾讯云

控制台–》轻量应用服务器（往下滑我的资源找到服务器，我这里是轻量服务器，没有服务器的先购买）

找到对应的服务器，点击进去

选择左边的密钥

4.添加密钥

这里公钥是我们之前创建的 id_rsa.pub ,查看id_rsa.pub文件，并把内容复制到公钥位置。

5.添加密钥对

回到服务器，绑定你刚添加的密钥

6.回到终端，链接服务器

xxx 为你的服务器ip

ssh root@xxx

这里代表你链接成功。

7.配置快捷登入方式

exit; 退出服务器

在 .ssh目录下创建 config文件

vim conifg

xxx为服务器ip

Host root
     HostName xxx
     Port 22
     User root
     IdentityFile ~/.ssh/id_rsa
1
2
3
4
5

之后我们就可以快捷登入
ssh root // root ,是你config中配置的 Host

8.将项目打包，然后将打包后的项目推送到服务器

xxx为服务器ip
./dist 代表你打包后的项目，这里根据自己终端的路径写
/home/study 代表你服务器上面的路径，代表你想将你的代码推送到那个目录下
没有目录需要现在服务器下创建哈~~ mkdir -p /home/study // 创建目录
scp -r ./dist root@xxx:/home/study

9.下载 nginx

到服务器中下载nginx

yum install nginx

讲解下nginx的命令

systemctl start nginx // 开启nginx
systemctl status nginx // 查看nginx的启动状态（开启/关闭）
nginx -t  // 检测 nginx.conf 文件是否有语法错误
nginx -s reload // 重启nginx 
1
2
3
4

首先我们到 /etc/nginx 下，然后编辑nginx.conf文件

配置项目地址，和入口文件我们就能通过ip地址访问项目了，修改服务器域名（域名必须绑定ip），就能通过域名访问你的项目了，每次修改完文件，重启下nginx。

10.配置ssl证书，使用https域名访问

解开注释#，所有的，然后将证书上传到对应的文件夹下面，然后就可以通过https访问项目了