前言

在上一篇文章中,依旧详细的讲解了如何部署后端,本篇再接再厉告诉大家伙儿如何部署 前端

前置条件

默认大家伙儿已经有服务器了,我的是阿里云的.

Step 1: 安装 Nginx

下载 Nginx.js 的安装包

1
yum install nginx

查看是否安装成功

1
nginx -v

此时可以去浏览器输入yourIp看看

Step 2: Coding 起码

找一个你最喜欢的地方新建一个文件,我的例子可能不是那么规范,但是先能跑就行

新建文件夹project

1
2
3
cd /
mkdir project
cd project

在project中新建文件夹frontEnd

1
2
mkdir frontEnd
cd frontEnd

将前端代码打包,一般会生成dist

将dist复制到frontEnd

Step 3: 获取证书

首先你需要去得到免费的 ssl 证书
以阿里云为例
进入阿里云官网搜索数字证书管理服务
点击左侧SSL私有证书
点击创建证书
点击证书申请

img

根据要求填写
这里我们域名填写front.yourDomain.com
点击提交审核
等待一分钟…刷新页面
点击下载
下载服务器类型Nginx的证书
下载后解压,会有两个文件front.XXXXX.pem front.XXXXX.key
进入服务器

1
2
3
cd /
cd ssl
cd etc

将两个证书传递至ect文件夹中
我这里使用的FinalShell,这样上传文件便捷些,也可以通过命令,这一次我依旧不会～（下次真的）

Step 4: 绑定域名

我们去操作nginx.conf文件

1
2
3
4
cd /
cd etc
cg nginx
vim nginx.conf

ngin.conf 文件新增以下内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
server {
       listen       443 ssl http2;
       listen       [::]:443 ssl http2;
       server_name  front.yourDomain.com;
       root         你的dist目录所在位置,例如:/project/navSite/;

       ssl_certificate /ssl/etc/front.XXXXXX.com.pem;
       ssl_certificate_key /ssl/etc/front.XXXXXX.com.key;
       ssl_session_cache shared:SSL:1m;
       ssl_session_timeout  10m;
       ssl_ciphers HIGH:!aNULL:!MD5;
       ssl_prefer_server_ciphers on;

       # Load configuration files for the default server block.
       include /etc/nginx/default.d/*.conf;

       error_page 404 /404.html;
           location = /40x.html {
       }

       error_page 500 502 503 504 /50x.html;
           location = /50x.html {
       }
   }

同时我们还可以在问价中加入

1
2
3
4
5
  server {
    listen 80;
    server_name front.yourDomain.com;
    return 301 https://front.yourDomain.com$request_uri;
}

这样还当别人访问 http 时还可以自动转发到 https

这样我们在浏览器中输入front.yourDomain.com就可以看到之前的页面辣

写在后面

其实前端的部署相对于后端来说还是简单了许多,相信大家伙还是很容易实现的