Nginx线上部署纯Html代码

Nginx线上部署纯Html代码

    • 一、将前端项目准备好
    • 二、Nginx配置
    • 三、访问页面
    • 四、参考链接

首先说明⭐

  • 前端代码,纯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位置
Nginx线上部署纯Html代码_第1张图片

//返回配置文件 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
即可访问到页面

Nginx线上部署纯Html代码_第2张图片
Nginx线上部署纯Html代码_第3张图片

四、参考链接

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

你可能感兴趣的:(LINUX,nginx)