WEB前端HTTPS实践

最新推荐文章于 2024-09-20 10:09:10 发布

tsinson

最新推荐文章于 2024-09-20 10:09:10 发布

阅读量236

点赞数

文章标签：前端 https 网络协议

本文链接：https://blog.csdn.net/tsinson/article/details/134253326

版权

最近工作上没有那么忙，有时间汇总与撰写工作中用到的一些技术内容，用于备份与分享。

前端有三大主流框架，本人以后端设计与开发为主，对比各框架之后，选择Vue框架作为前端框架，主要看重的是入门简单，组件多，国内学习资料多，开发速度相对更快。

本文分四部分讲解。1. 前端代码编译；2. http环境部署；3. https环境部署；4. 域名环境部署。

一、前端代码编译

为了减少业务上的理解，使用了github使用排名靠前的Vue框架开源代码vue-element-admin作为演示用例。

加载代码

常用VSCode、PyCharm等IDE工具加载代码，本人电脑因已安装了IDEA工具，所以使用IDEA工具加载代码。

2. 安装依赖包

执行 npm install

3. 运行程序

执行 npm run dev，具体命令参考readme.md和package.json文件

运行正常情况下，可以看到如下界面：

4. 打包程序

执行 npm run build:prod，具体命令参考readme.md和package.json文件

将编译后的工程目录下的dist目录打包为dist.zip文件

二、http环境部署

上传前端代码dist.zip和nginx配置到指定目录

2. 获取nginx镜像

拉取稳定的nginx镜像

docker pull nginx:1.22.1

3. 修改nginx配置

根据实际情况修改nginx配置信息。例如：修改nginx中conf.d目录中的default.conf文件。

server {
    listen       80;
    listen  [::]:80;
    server_name  localhost;
    client_max_body_size 2048m;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }

    error_page   500 502 503 504  /50x.html;

    location = /50x.html {
        root   /usr/share/nginx/html;
    }
    location /api/v1/authority {
        proxy_pass http://192.168.***.***:8080;
    }
}

4. 启动nginx

执行以下docker命令，启动nginx

docker run -d -p 8080:80 --name show-web -v /root/web/dist:/usr/share/nginx/html -v /root/web/nginx/conf.d:/etc/nginx/conf.d nginx:1.22.1

5. 访问环境

三、https环境部署

安装OpenSSL

使用以下命令检查服务器是否已经安装了OpenSSL，没有则需要安装OpenSSL

rpm -qa|grep openssl

2. 生成私钥

创建cert目录

mkdir -p /root/web/cert

使用以下命令生成一个私钥文件：

openssl genrsa -out private.key 2048

3. 生成证书签名请求（CSR）

使用以下命令生成证书签名请求文件：

openssl req -new -key private.key -out certificate.csr

4. 生成自签名证书

使用以下命令生成自签名证书：

openssl x509 -req -days 365 -in certificate.csr -signkey private.key -out certificate.crt

5. 配置Nginx

在conf.d目录下新建一个ssl.conf文件，内容如下

server {
    listen       443 ssl;
    server_name  localhost;
    client_max_body_size 2048m;
    ssl_certificate      /root/web/cert/certificate.crt;
    ssl_certificate_key  /root/web/cert/private.key;
    ssl_session_cache    shared:SSL:1m;
    ssl_session_timeout  5m;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }

    error_page   500 502 503 504  /50x.html;

    location = /50x.html {
        root   /usr/share/nginx/html;
    }
    location /api/v1/authority {
        proxy_pass http://192.168.***.***:8080;
    }
}

6. 启动nginx

docker run -d -p 8443:443 --name show-web-https -v /root/web/dist:/usr/share/nginx/html -v /root/web/nginx/conf.d:/etc/nginx/conf.d -v /root/web/cert:/root/web/cert nginx:1.22.1

7. 访问环境