当前位置: 首页 > news >正文

docker部署前端,配置域名和ssl

       之前使用80端口部署前端项目后,可以使用IP+端口号在公网访问到部署的项目。

       进行ICP域名备案后,可以通过域名解析将IP套壳,访问域名直接访问到部署的项目~

       如果使用http协议可以很容易实现这个需求,对nginx.conf文件进行修改,具体看docker在服务器中部署多个前端_docker部署一个项目有两个前端怎么办-CSDN博客

  server_name  localhost;#这里localhost改成域名即可

       但是这样通过http协议访问的网站会提示网站不安全。我们需要使用https协议改用443端口访问我们的项目。

       所以我们需要在服务器的官网上给域名去申请一个ssl证书,在申请成功后,直接下载ssl文件到本地。可以得到这两个域名.crt和.key的文件。

       首先进到服务器的 /etc/ssl/certs/ 目录下放入这两个文件,后续启动容器会把当前目录的文件挂载到nginx内部的 /etc/ssl/certs/ 目录中,不然会ssl文件读取失败

       然后按照之前前端部署的方式,首先在前端打包项目,得到dist文件夹。

       来到服务器,在任意位置创建一个项目文件夹。再放入dist文件夹,然后开始创建其他文件

1. Dockerfile 文件

# 使用NGINX作为基础镜像
FROM nginx# 复制解压后的网站文件到NGINX默认路径下
COPY rme/ /usr/share/nginx/html/
# 将你的 NGINX 配置文件复制到容器中的 NGINX 配置目录
COPY default.conf /etc/nginx/conf.d/default.conf

2. default.conf

upstream my_server{server 你的域名:8080; # 后端server 地址keepalive 2000;
}server {listen 80;#填写绑定证书的域名server_name  你的域名, localhost;#把http的域名请求转成https,相当于用户访问http也可以自动跳转到https,避免出现网页提示不安全return 301 https://$host$request_uri; }    server {listen  443 ssl;server_name  你的域名.cn; #证书文件名称ssl_certificate_key /etc/ssl/certs/你的域名.key;#私钥文件名称 .crt和.pem都可以用ssl_certificate /etc/ssl/certs/你的域名.crt; ssl_session_timeout 1d;ssl_session_cache shared:SSL:50m;ssl_session_tickets off;ssl_protocols TLSv1 TLSv1.1 TLSv1.2;ssl_ciphers ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-SHA384:ECDHE-RSA-AES256-SHA384:ECDHE-ECDSA-AES128-SHA256:ECDHE-RSA-AES128-SHA256;ssl_prefer_server_ciphers on;location / {root   /usr/share/nginx/html;try_files $uri $uri/ /index.html;index  index.html index.htm;}error_page   500 502 503 504  /50x.html;location = /50x.html {root   html;}}

3. set.sh 

#!/bin/bash# 构建名为 test 的 Docker 镜像
docker build -t test .# 检查是否存在构建的镜像
if docker images test | grep -q test ; thenecho "镜像 test 已存在,继续执行下一步..."
elseecho "错误:镜像 test 不存在!请先构建镜像。"exit 1
fi# 运行容器
#docker run -d -p 80:80 --name test test # 创建新nginx容器 配置ssl证书
docker run --name test -p 80:80 -p 443:443    -v /usr/local/nginx/logs:/var/log/nginx -v /etc/ssl/certs:/etc/ssl/certs  --privileged=true -d --restart=always test # 检查容器是否成功运行
if docker ps -a --filter "name=^test $" --format "{{.Status}}" | grep -q "Up"; thenecho "容器 test 运行成功!"
elseecho "错误:容器 test 运行失败!"
fi

       到这里我们有 dist前端资源文件夹,Dockerfile镜像构建文件,default.conf nginx配置文件,还有/etc/ssl/certs/目录下的ssl证书文件和 set.sh运行脚本。

cd到当前目录,输入 ./set.sh 运行启动脚本。

搞定~~~~

相关文章:

docker部署前端,配置域名和ssl

之前使用80端口部署前端项目后,可以使用IP端口号在公网访问到部署的项目。 进行ICP域名备案后,可以通过域名解析将IP套壳,访问域名直接访问到部署的项目~ 如果使用http协议可以很容易实现这个需求,对nginx.conf文件进行修改&#…...

初学Spring之 IOC 控制反转

Spring 是一个轻量级的控制反转&#xff08;IOC&#xff09;和面向切面编程&#xff08;AOP&#xff09;的框架 导入 jar 包&#xff1a;spring-webmvc、spring-jdbc <dependency><groupId>org.springframework</groupId><artifactId>spring-webmvc&…...

rpc的仅有通信的功能,在网断的情况下,比网通情况下,内存增长会是什么原因

RPC&#xff08;Remote Procedure Call&#xff0c;远程过程调用&#xff09;主要负责在分布式系统中透明地调用远程服务&#xff0c;就像调用本地函数一样。它封装了网络通信的细节&#xff0c;使得开发者可以专注于业务逻辑而非底层通信协议。RPC通信通常包括序列化、网络传输…...

从零开始:如何设计一个现代化聊天系统

写在前面: 此博客内容已经同步到我的博客网站,如需要获得更优的阅读体验请前往https://mainjaylai.github.io/Blog/blog/system/chat-system 在当今数字化时代,聊天系统已成为我们日常生活和工作中不可或缺的一部分。从个人交流到团队协作,从客户服务到社交网络,聊天应用…...

香橙派OrangePi AIpro初体验:当小白拿到一块开发板第一时间会做什么?

文章目录 香橙派OrangePi AIpro初体验&#xff1a;当小白拿到一块高性能AI开发板第一时间会做什么前言一、香橙派OrangePi AIpro概述1.简介2.引脚图开箱图片 二、使用体验1.基础操作2.软件工具分析 三、香橙派OrangePi AIpro.测试Demo1.测试Demo1&#xff1a;录音和播音(USB接口…...

【C语言内存函数】

目录 1.memcpy 使用 模拟实现 2.memmove 使用 模拟实现 3.memset 使用 4.memcmp 使用 1.memcpy 使用 void * memcpy ( void * destination, const void * source, size_t num );目的地址 源地址 字节数 destination&#xff1a;指向要复制内…...

Mysql部署MHA高可用

部署前准备&#xff1a; mysql-8.0.27下载地址&#xff1a;https://cdn.mysql.com//Downloads/MySQL-8.0/mysql-8.0.27-1.el7.x86_64.rpm-bundle.tar mha-manager下载地址&#xff1a;https://github.com/yoshinorim/mha4mysql-manager/releases/download/v0.58/mha4mysql-mana…...

【算法学习】射线法判断点在多边形内外(C#)以及确定内外两点连线与边界的交点

1.前言&#xff1a; 在GIS开发中&#xff0c;经常会遇到确定一个坐标点是否在一块区域的内部这一问题。 如果这个问题不是一个单纯的数学问题&#xff0c;例如&#xff1a;在判断DEM、二维图像像素点、3D点云点等含有自身特征信息的这些点是否在一个区域范围内部的时候&#x…...

SQL语句(DML)

DML英文全称是Data Manipulation Language&#xff08;数据操作语言&#xff09;&#xff0c;用来对数据库中表的数据记录进行增删改等操作 DML-添加数据 insert into employee(id, workno, name, gender, age, idcard) values (1,1,Itcast,男,10,123456789012345678);select *…...

uniapp小程序打开地图导航

uniapp uni.getLocation({type: gcj02, //返回可以用于uni.openLocation的经纬度success: function (res) {const latitude res.latitude;const longitude res.longitude;uni.openLocation({latitude: latitude,longitude: longitude,success: function () {console.log(suc…...

webstorm格式化或保存时 vue3引入的组件被删除了

解决办法 保存时设置 格式化设置...

Java时间转换

一、线程不安全 Date date new Date(); SimpleDateFormat dateFormat new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"); String prefix dateFormat.format(date);二、线程安全,建议使用 String t1 LocalDateTime.now().format(DateTimeFormatter.ofPattern("y…...

Spring Boot与WebFlux的实战案例

Spring Boot与WebFlux的实战案例 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01;今天&#xff0c;我们将探讨如何利用Spring Boot和WebFlux构建响应式应用的实战…...

vue3引入本地静态资源图片

一、单张图片引入 import imgXX from /assets/images/xx.png二、多张图片引入 说明&#xff1a;import.meta.url 是一个 ESM 的原生功能&#xff0c;会暴露当前模块的 URL。将它与原生的 URL 构造器 组合使用 注意&#xff1a;填写自己项目图片存放的路径 /** vite的特殊性…...

git 禁止dev合并到任何其他分支

创建 pre-merge-commit 钩子 导航到 Git 仓库的钩子目录&#xff1a; cd /path/to/your/repo/.git/hooks创建或编辑 pre-merge-commit 钩子&#xff1a; 也可以通过指令创建 nano pre-merge-commit在钩子文件中添加以下代码&#xff1a; #!/bin/sh# 获取当前分支名称 curr…...

第二节:如何使用thymeleaf渲染html(自学Spring boot 3.x的第一天)

大家好&#xff0c;我是网创有方&#xff0c;今天来学习如何使用thymeleaf渲染html。该模板运用不广泛&#xff0c;所以本节内容了解既可。 第一步&#xff1a;创建html文件。 在模板templates目录下创建一个html文件。 编写代码如下&#xff1a; <!DOCTYPE html> <…...

计算机相关术语科普之什么叫网关(Gateway)

网关&#xff08;Gateway&#xff09;是一个在计算机网络中起到关键作用的设备或系统&#xff0c;它扮演着网络间连接器或协议转换器的角色。 一、定义与功能 1&#xff09;定义&#xff1a; 网关是在不同网络之间实现互连的复杂设备&#xff0c;仅用于两个高层协议不同的网…...

B站网页部分API

https://www.bilibili.com/ 数据结构 mid: 用户id name: 用户名 face: 用户头像url noface.jpg为默认头像 sign&#xff1a; 签名level: b站等级 coins: b站硬币粉丝 https://api.bilibili.com/x/relation/fans?vmid{mid}&pn{pn}&ps{limit}&orderdesc&…...

使用Spring Boot和Spring Security保护你的应用

使用Spring Boot和Spring Security保护你的应用 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01;今天我们将深入探讨如何利用Spring Boot和Spring Security来保护…...

CVE-2019-12272 Openwrt可视页面LuCi命令注入漏洞复现(完结)

声明 本文所使用的一些源代码等内容已经上传至github&#xff0c;具体地址如下 Vulnerability_POC-EXP/OpenWrt/CVE-2019-12272 at main a2148001284/Vulnerability_POC-EXP GitHub 漏洞简介 参考内容&#xff1a; CVE-2019-12272 OpenWrt图形化管理界面LuCI命令注入分析 |…...

BinCmdParser:嵌入式二进制命令动态解析器

1. BinCmdParser&#xff1a;面向嵌入式通信的动态二进制命令解析器 在工业控制、传感器网络与跨平台设备互联场景中&#xff0c;串口/UART/SPI/I2C等低带宽物理通道常承载结构化二进制指令。传统固定帧格式&#xff08;如Modbus RTU、自定义8字节头4字节长度2字节CRC&#xff…...

(二)人工智能算法之监督学习——线性回归

一、核心定义 线性回归是有监督、回归任务里最基础、最经典的机器学习算法。 核心目标&#xff1a; 用一条直线&#xff08;一元&#xff09;/ 超平面&#xff08;多元&#xff09;&#xff0c;拟合自变量 X 和连续型因变量 Y 之间的线性相关关系&#xff0c;用来做数值预测。 …...

宝塔面板异地备份数据全攻略:从本地到云端的安全守护

1. 为什么你需要宝塔面板异地备份&#xff1f; 想象一下这样的场景&#xff1a;凌晨三点&#xff0c;你的服务器突然宕机&#xff0c;硬盘彻底损坏。如果所有数据都只存在本地&#xff0c;这意味着网站所有内容、用户数据、订单记录将瞬间归零。我见过太多站长因为单点存储导致…...

Wave-U-Net:革新音频分离技术的端到端深度学习解决方案

Wave-U-Net&#xff1a;革新音频分离技术的端到端深度学习解决方案 【免费下载链接】Wave-U-Net Implementation of the Wave-U-Net for audio source separation 项目地址: https://gitcode.com/gh_mirrors/wa/Wave-U-Net 在数字音频处理领域&#xff0c;从混合音频中精…...

Adafruit MAX44009库详解:超低功耗环境光传感器驱动与工程实践

1. 项目概述Adafruit MAX44009 库是专为 Analog Devices&#xff08;原 Maxim Integrated&#xff09;推出的 MAX44009 环境光传感器设计的 Arduino 兼容驱动库。该库封装了 IC 通信、寄存器配置、自动量程切换、中断管理及光照度&#xff08;lux&#xff09;换算等底层逻辑&am…...

OpenClaw对话式编程:Qwen3-32B私有镜像调试代码

OpenClaw对话式编程&#xff1a;Qwen3-32B私有镜像调试代码 1. 为什么选择OpenClawQwen3-32B组合 去年我在重构一个Python数据分析项目时&#xff0c;每天要花大量时间反复执行"写代码-调试-优化"的循环。传统IDE的补全功能对复杂业务逻辑帮助有限&#xff0c;直到…...

KV260视觉AI套件到手后,我跳过了图形界面,直接用SSH搞定了网络配置(附详细命令)

KV260视觉AI套件极简配置指南&#xff1a;从串口到SSH的全命令行实战 拿到KV260开发板的第一天&#xff0c;我就决定抛弃图形界面——毕竟在嵌入式开发领域&#xff0c;真正的效率永远来自命令行。本文将分享如何通过纯命令行完成从开箱到网络配置的全过程&#xff0c;包括串口…...

深入解析亚马逊SP-API Reports模块:如何高效处理大规模数据报告

亚马逊SP-API Reports模块实战指南&#xff1a;从数据洪流中提炼商业价值 在跨境电商的竞技场中&#xff0c;数据就是新型石油。每天有超过250万卖家通过亚马逊平台产生海量交易数据&#xff0c;而SP-API Reports模块正是开采这座数据金矿的专属钻机。不同于基础的数据导出工具…...

VIBE革命性视频人体姿态估计:CVPR2020获奖论文完整实现解析

VIBE革命性视频人体姿态估计&#xff1a;CVPR2020获奖论文完整实现解析 【免费下载链接】VIBE Official implementation of CVPR2020 paper "VIBE: Video Inference for Human Body Pose and Shape Estimation" 项目地址: https://gitcode.com/gh_mirrors/vi/VIBE …...

保姆级教程:用YOLOv11+PyQt5打造你的专属天气识别桌面应用(附完整源码)

从零构建基于YOLOv11的智能天气识别桌面应用 窗外阴云密布&#xff0c;你是否曾好奇此刻的天气状况究竟如何&#xff1f;现代计算机视觉技术让机器也能像人类一样"看懂"天气。本文将带你完整实现一个能识别11种天气类型的桌面应用&#xff0c;从模型加载到界面交互&a…...