Nginx线上部署纯Html代码

首先说明⭐

• 前端代码，纯Html，未使用任何框架
• 没有后端配置
• 线上环境Docker安装Nginx，Nginx已经指向两个前端项目
• 链接服务器的软件是 MobaXterm

需求，现在Nginx再指向一个前端Html项目

一、将前端项目准备好🌙

注意：

• index.html首页文件要放在最外层，否则在配置nginx指向不能读取到外部资源
• 只是个人建议：虽然是纯html文件，但自己创建文件夹时，静态资源文件可以放在 static 文件里面，整洁清晰
• 以下示例是主要说index位置

如下：【反例】

myTest(文件名)
	- img
	-  html
		- index.html
		- hello.html
		
//此时nginx配置指向 index.html 文件， img里面的资源将会读取不到		

【正确方式】

myTest(文件名)
	- img 
	-  html
		- hello.html
	- index.html (外层)

二、Nginx配置 🏮

① 打开服务器，我的Nginx是在Docker容器环境下，查看Nginx的挂载信息【如果你记得你的文件夹位置，可以省略😳】

//查看nginx配置
[root@ecs-dead ~]# docker inspect nginx

//只复制了挂载信息
//Source 是挂载到的位置【你服务器的文件夹位置】
...
        "Mounts": [
            {
                "Type": "bind",
                "Source": "/data/docker/nginx/conf.crt",
                "Destination": "/etc/nginx/conf.crt",
                "Mode": "",
                "RW": true,
                "Propagation": "rprivate"
            },
            {
                "Type": "bind",
                "Source": "/data/docker/nginx/conf.d",
                "Destination": "/etc/nginx/conf.d",
                "Mode": "",
                "RW": true,
                "Propagation": "rprivate"
            },
            {
                "Type": "bind",
                "Source": "/data/docker/nginx/nginx.conf",
                "Destination": "/etc/nginx/nginx.conf",
                "Mode": "",
                "RW": true,
                "Propagation": "rprivate"
            },
            {
                "Type": "bind",
                "Source": "/data/docker/nginx/html",
                "Destination": "/usr/share/nginx/html",
                "Mode": "",
                "RW": true,
                "Propagation": "rprivate"
            },
            {
                "Type": "bind",
                "Source": "/data/docker/nginx/logs",
                "Destination": "/var/log/nginx",
                "Mode": "",
                "RW": true,
                "Propagation": "rprivate"
            }
        ],

...

② 配置

//进入挂载文件夹
[root@ecs-dead ~]# cd /data/docker/nginx/html/

//创建防止项目的文件夹【名字不强求和项目名一致，为了方便辨认写一致挺好】
[root@ecs-dead html]# mkdir myTest

//查看文件夹
[root@ecs-dead html]# ls

//进入myTest文件夹
[root@ecs-dead html]# cd myTest

//将myTest文件夹的里面的内容，直接拖拽进这个文件夹

此图是其他文件的，与案例类似， leave位置就是myTest位置

//返回配置文件 conf.d文佳夹
[root@ecs-dead html# cd /data/docker/nginx/conf.d/
[root@ecs-dead conf.d]#

//进入你的配置文件
[root@ecs-dead conf.d]# vim default.conf

--这是配置文件
-- i --> 进入编辑模式
-- 编辑完后 按 esc 退出编辑
-- :wq 保存并推出  :q! 不保存强制退出

server {
    listen 443 ssl;
        server_name ****; #服务域名 我就省略了

        ssl_certificate   conf.crt/**com.pem;
        ssl_certificate_key  conf.crt/**lass.com.key;
        ssl_session_timeout 60m;
        ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
        ssl_ciphers ALL:!ADH:!EXPORT56:RC4+RSA:+HIGH:+MEDIUM:+LOW:+SSLv2:+EXP;
        ssl_prefer_server_ciphers on;


    location / {
        root   /usr/share/nginx/html/mole-admin;
        index  index.html index.htm;
    }

	# 关键点 不要随便设置root, 如果设置了，那其他文件夹的指向不能再写root->应写 alias⭐
    location /mytest {
        alias   /usr/share/nginx/html/myTest;
        index  index.html index.htm;
    }
}

注释：
//RTT【(Round-Trip Time)往返时间】
//这里是安全和性能的核心，需要长期关注定期更新。另外特别注意的是HTTPS里面耗时的有两个地方一个是网络方面的RTT就是延时，一个是密钥交换优化需要在这两个地方下功夫
ssl_ciphers (共18个，ECDHE、DHE、AES开头个6个)

//让服务器选择要使用的算法套件
ssl_prefer_server_ciphers on;

//考虑到APP操作习惯及安全性暂定60分钟，这个默认是5分钟，一般为30分钟到4小时，如果是网页形式可以时间更长一般不超过24小时，多了有安全隐患
ssl_session_timeout 60m;

//证书，客户端解密使用，服务器证书和中间证书合并到一个文件，不需要根证书；另外1.7.3版本增加了新指令ssl_password_file可以支持带密码的私钥
ssl_certificate   conf.crt/**com.pem;

//私钥，服务器加密使用
ssl_certificate_key  conf.crt/**lass.com.key;

//苹果APP只支持TLSv1.2，会优先使用TLSv1.2，考虑到客户端兼容性，其他2各也加上
ssl_protocols TLSv1.3 TLSv1.2 TLSv1.1 TLSv1;

三、访问页面 😊

然后
服务器：curl 域名/mytest/index.html
浏览器：域名/mytest/index.html
即可访问到页面

四、参考链接

HTTPS配置优化及注意点 – https://www.jianshu.com/p/9c3095f034f7

使用nginx实现用在同域名下部署多个前后端分离项目 – https://www.cnblogs.com/sueyyyy/p/14525066.html

location之alias浅析 – https://www.cnblogs.com/williamwsj/p/13891494.html