title: 阿里云部署前端 date: 2023-06-13 15:17:06 tags: [服务器, 阿里云, 前端, 上线, 部署, react, http, https] cover: https://cdn.zyha.cn/zhuao/pexels-asad-photo-maldives-1024973.jpg?x-oss-process=style/blog

前言

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

前置条件

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

Step 1: 安装 Nginx

下载 Nginx.js 的安装包

yum install nginx

查看是否安装成功

nginx -v

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

Step 2: Coding 起码

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

新建文件夹project

cd /
mkdir project
cd project

在project中新建文件夹frontEnd

mkdir frontEnd
cd frontEnd

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

将dist复制到frontEnd

Step 3: 获取证书

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

img

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

cd /
cd ssl
cd etc

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

Step 4: 绑定域名

我们去操作nginx.conf文件

cd /
cd etc
cg nginx
vim nginx.conf

ngin.conf 文件新增以下内容

 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 {
        }
    }

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

  server {
    listen 80;
    server_name front.yourDomain.com;
    return 301 https://front.yourDomain.com$request_uri;
}

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

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

写在后面

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