前端项目ip做域名映射

1、在阿里云、腾讯云购买域名

SSL 证书和私钥生成

阿里云生成证书详解

/path/to/your/ssl_certificate1.crt和/path/to/your/ssl_certificate1.key

生成私钥（key）：
使用 OpenSSL 工具生成一个私钥文件。执行以下命令：

openssl genrsa -out your_domain.key 2048

这将生成一个名为 your_domain.key 的私钥文件，长度为 2048 位。记得将 your_domain 替换为你的域名。

生成证书签名请求（CSR）：
使用私钥文件生成一个证书签名请求文件（CSR）。执行以下命令：

openssl req -new -key your_domain.key -out your_domain.csr

在执行过程中，会提示你提供一些证书相关的信息，如国家、省份、城市、组织名称等。按照提示填写即可。

获取 SSL 证书：

将生成的 CSR 文件提交给一个 SSL 证书颁发机构（CA）进行签名，以获取 SSL 证书。你可以选择购买证书或者使用免费的证书，如 Let’s Encrypt 等。

安装 SSL 证书：

将从 CA 获取到的 SSL 证书文件和中间证书文件（如果有的话）上传到服务器，并将它们配置到 Nginx 的 SSL 配置中。

通常情况下，你会得到一个 .crt 格式的证书文件和一个 .key 格式的私钥文件。将它们拷贝到服务器上的某个目录，例如 /etc/nginx/ssl/。

2、做http域名映射

把项目访问ip映射到域名上
http://xxxx:6087/ 

http://XXX.admin.cn:6087/ 

3、做https域名映射

即访问XXX.admin.cn域名时，自动根据域名映射到项目

如果你有多个服务，每个服务都需要使用不同的域名来访问，你可以为每个服务配置一个独立的 server 块，并分别监听不同的域名。

例如，假设你有两个服务，一个服务运行在 6087 端口，另一个服务运行在 6088 端口，并且你希望分别使用 service1.example.com 和 service2.example.com 来访问它们，你可以这样配置

nginx新增项目的ssl config配置

server {
    listen 443 ssl;
    server_name service1.example.com;

    ssl_certificate /path/to/your/ssl_certificate1.crt;
    ssl_certificate_key /path/to/your/ssl_certificate1.key;

    location / {
        proxy_pass http://localhost:6087;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

server {
    listen 443 ssl;
    server_name service2.example.com;

    ssl_certificate /path/to/your/ssl_certificate2.crt;
    ssl_certificate_key /path/to/your/ssl_certificate2.key;

    location / {
        proxy_pass http://localhost:6088;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

在这个配置中定义了两个 server 块，分别用于监听 service1.example.com 和 service2.example.com。每个 server 块都配置了独立的 SSL 证书，并将请求代理到不同的服务端口。这样，你就可以通过不同的域名来访问不同的服务了。

需要注意的是，所有的 server 块都监听了相同的端口（443），但每个 server 块的 server_name 不同，因此 Nginx 可以根据请求的域名来选择匹配的 server 块进行处理。

配置 Nginx 使用 SSL

编辑 Nginx 的配置文件，在相应的 server 块中配置 SSL 证书和私钥的路径。例如：

ssl_certificate /etc/nginx/ssl/your_domain.crt;
ssl_certificate_key /etc/nginx/ssl/your_domain.key;

然后重新加载或重启 Nginx 使配置生效。

完成以上步骤后，你就拥有了一个 SSL 加密的网站，可以通过 HTTPS 进行访问。

4、项目对应改造

基于之前nginx部署前端的项目的改造

上传从阿里云获取到ssl证书文件

删除容器

停止并删除容器，把ssl目录也挂在到nginx容器中

docker ps 查询容器

docker stop 2ed 停止容器
docker rm 2ed 删除容器

https nginx配置文件

server
{
    listen 443 ssl;
    server_name xx.admin.xxx.com;

    ssl_certificate /etc/nginx/ssl/xx.admin.xxx.com.pem;
    ssl_certificate_key /etc/nginx/ssl/xx.admin.xxx.com.key;
	ssl_protocols TLSv1.2 TLSv1.3;
    location / {
       #网站主页路径。此路径仅供参考，具体请您按照实际目录操作。
       #例如，您的网站运行目录在/etc/www下，则填写/etc/www。
       #允许跨域请求的域，* 代表所有
       add_header 'Access-Control-Allow-Origin' *;
       #允许带上cookie请求
       add_header 'Access-Control-Allow-Credentials' 'true';
       #允许请求的方法，比如 GET/POST/PUT/DELETE
       add_header 'Access-Control-Allow-Methods' *;
       #允许请求的header
       add_header 'Access-Control-Allow-Headers' *;

       root /usr/share/nginx/html/dist;
	   try_files $uri $uri/ /index.html;
       index index.html index.htm;
    }
    location /stage-api/ {
         proxy_read_timeout 200s;
        proxy_set_header Host $http_host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header REMOTE-HOST $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_pass http://localhost:6088/;
    }

}

重新生成容器

新增-v /home/nginx/ssl:/etc/nginx/ssl \ 挂载ssl目录

docker run --net host  --name nginx --restart always  \
-v /home/nginx/conf/nginx.conf:/etc/nginx/nginx.conf \
-v /home/nginx/conf/conf.d:/etc/nginx/conf.d \
-v /home/nginx/ssl:/etc/nginx/ssl \
-v /home/nginx/log:/var/log/nginx \
-v /home/nginx/html:/usr/share/nginx/html \
-d nginx:1.24.0

测试

直接访问域名https://xxx.admin.xxxx.com/ 跳转使用成功