如何将资源前端通过 Docker 部署到远程服务器
作为一个程序员,在开发过程中,经常会遇到项目部署的问题,在现在本就不稳定的大环境下,前端开发也需要掌握部署技能,来提高自己的生存力,今天就详细说一下如何把一个前端资源放到远程服务器上面通过docker部署,并且可以在浏览器中访问前端页面;
前提:你有一个远程服务器,并且可以通过 SSH 工具访问
步骤一:安装 Docker————进入远程服务器上面操作
1. 使用 SSH 连接到你的远程服务器。使用以下命令:
ssh your_username@your_server_ip
2. 更新现有的软件包索引
sudo apt-get update
3. 安装必要的包,这些包允允许 apt (Linux系统的命令行工具,类似cmd)使用 HTTPS访问软件包
sudo apt-get install apt-transport-https ca-certificates curl gnupg lsb-release
4. 添加 Docker 官方的 GPG 密钥,这确保你从可信来源安装 Docker:
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /usr/share/keyrings/docker-archive-keyring.gpg
5. 设置稳定的 Docker 存储库,通过添加 Docker 的 APT 软件源,可以从 Docker 官方仓库安装 Docker;
echo \"deb [arch=amd64 signed-by=/usr/share/keyrings/docker-archive-keyring.gpg] https://download.docker.com/linux/ubuntu \$(lsb_release -cs) stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
6. 安装 Docker Engine ,更新软件包索引并安装最新版本的 Docker Engine 和容器运行时:
sudo apt-get update
sudo apt-get install docker-ce docker-ce-cli containerd.io
7. 验证 Docker 安装是否成功,运行一个测试容器来验证 Docker 是否正确安装:
sudo docker run hello-world
步骤二:准备前端静态网页————本地电脑上面操作
1. 创建项目文件夹;
在自己电脑上创建一个新的项目文件夹,例如 my-static-website
2. 将你的前端静态网页文件放入项目文件夹中;
将你的静态网页文件(例如 index.html
, style.css
, script.js
等)放入 my-static-website
文件夹
3. 创建 Dockerfile
文件;
在项目文件夹中创建一个 Dockerfile
文件,用于定义 Docker 镜像的构建过程。以下是一个使用 Nginx 作为基础镜像的 Dockerfile
示例
# 使用官方 Nginx 镜像作为基础镜像
FROM nginx:alpine# 将当前目录下的所有文件复制到 Nginx 容器中的默认 html 目录
COPY . /usr/share/nginx/html# 暴露容器的 80 端口
EXPOSE 80# 运行 Nginx
CMD ["nginx", "-g", "daemon off;"]
步骤三:构建 Docker 镜像————本地电脑上面操作
1. 导航到项目文件夹;使用cmd终端或命令行工具进入你的项目文件夹中
cd path_to_your_project_folder/my-static-website
2. 构建 Docker 镜像
运行以下命令来构建 Docker 镜像:
docker build -t my-static-website .
解释:
docker build
: 构建一个新的 Docker 镜像。-t my-static-website
: 为镜像指定一个标签(my-static-website
)。.
: 表示 Dockerfile 位于当前目录
3. 确认 Docker 镜像已构建成功 ;运行以下命令查看本地 Docker 镜像列表:
docker images
步骤四:镜像上传
这里提供两种上传方式,一种是上传到指定镜像库,然后从服务器上通过pull命令拉取;
另外针对离线环境,与外网隔绝的情况下,可以通过把镜像打成tar包进行手动上传到服务器;
方式一:推送 Docker 镜像到 Docker Hub(或其他镜像仓库)————本地电脑上面操作
1. 登录 Docker Hub 运行以下命令登录到 Docker Hub:
docker login
2. 标记镜像;将构建的本地镜像标记为 Docker Hub 上的镜像:
docker tag my-static-website your_dockerhub_username/my-static-website
解释:
docker tag
: 为本地镜像创建一个新的标签。my-static-website
: 本地镜像名称。your_dockerhub_username/my-static-website
: Docker Hub 上的镜像名称。
3. 推送镜像 将标记的镜像推送到 Docker Hub:
docker push your_dockerhub_username/my-static-website
解释:
docker push
: 推送镜像到镜像仓库。your_dockerhub_username/my-static-website
: 目标镜像名称。
方式二:将镜像打包成tar包,通过ssh工具上传到远程服务器
1. 导出 Docker 镜像为 tar
文件
使用 docker save
命令将 Docker 镜像保存为 tar
文件,tar文件默认保存在当前路径;
docker save -o my-static-website.tar my-static-website:latest
2. 通过远程工具(如xftp)工具将镜像压缩文件上传到服务
-------这里根据实际的ftp文件而定;
步骤五:在远程服务器上获取并运行 Docker 镜像——————进入远程服务器上面操作
方式一:docker镜像仓库拉取
1. 在远程服务器上登录 Docker Hub 使用以下命令登录 Docker Hub
sudo docker login
2. 拉取镜像 运行以下命令从 Docker Hub 拉取镜像
sudo docker pull your_dockerhub_username/my-static-website
解释:
sudo docker pull
: 从镜像仓库拉取镜像。your_dockerhub_username/my-static-website
: 要拉取的镜像名称。
方式二:手动上传的镜像
1. 导航到 tar
文件所在目录,使用 cd
命令进入上传的 tar
文件所在目录:
cd /path/to/upload
2. 导入 Docker 镜像,使用 docker load
命令将 tar
文件导入为 Docker 镜像:
sudo docker load -i my-static-website.tar
解释:
docker load
: 从文件中加载镜像。-i my-static-website.tar
: 指定输入文件
后续步骤两种方式都是一样的操作:
3. 运行容器 运行以下命令启动容器:
sudo docker run -d -p 80:80 your_dockerhub_username/my-static-website
解释:
sudo docker run
: 运行一个新的容器。-d
: 后台运行容器。-p 80:80
: 将容器的 80 端口映射到主机的 80 端口。your_dockerhub_username/my-static-website
: 要运行的镜像名称。
步骤六:通过网址访问静态页面————本地电脑上面操作
1. 确认服务器上的防火墙允许 HTTP 流量 使用以下命令确保服务器允许 HTTP 流量:
sudo ufw allow 80/tcp
2. 访问你的域名或服务器 IP 地址;在浏览器中输入你的服务器 IP 地址或域名来访问你的静态网站。例如:
http://your_server_ip
结语
通过以上步骤,你已经成功地将前端静态网页通过 Docker 部署到远程服务器上,并且可以通过网址访问该静态页面。如果有任何问题,请随时联系。
相关文章:
如何将资源前端通过 Docker 部署到远程服务器
作为一个程序员,在开发过程中,经常会遇到项目部署的问题,在现在本就不稳定的大环境下,前端开发也需要掌握部署技能,来提高自己的生存力,今天就详细说一下如何把一个前端资源放到远程服务器上面通过docker部…...

@react-google-maps/api实现谷歌地图嵌入React项目中,并且做到点击地图任意一处,获得它的经纬度
1.第一步要加入项目package.json中或者直接yarn install它都可以 "react-google-maps/api": "^2.19.3",2.加入项目中 import AMapLoader from amap/amap-jsapi-loader;import React, { PureComponent } from react; import { GoogleMap, LoadScript, Mar…...
【MySQL】2.库的操作
库的操作 一.创建数据库1.数据库的编码集 二.查看数据库三.修改数据库四.删除数据库五.数据库的备份和恢复 一.创建数据库 create database [if not exists] db_name [charsetutf8] [collateutf8_general_ci] //创建一个名为db_name的数据库,本质就是在/var/lib/my…...
深入Laravel服务容器:构建灵活应用的秘诀
标题:深入Laravel服务容器:构建灵活应用的秘诀 Laravel框架的服务容器是一个强大的工具,它负责管理类的依赖关系和执行依赖注入(DI)。服务容器是Laravel依赖注入系统的核心,使得应用组件之间的耦合度降低&…...

3.js - 模板渲染 - 金属切面效果
md,狗不学,我学 源码 // ts-nocheck// 引入three.js import * as THREE from three// 导入轨道控制器 import { OrbitControls } from three/examples/jsm/controls/OrbitControls// 导入lil.gui import { GUI } from three/examples/jsm/libs/lil-gui.m…...

【测试】系统压力测试报告模板(Word原件)
系统压力测试,简而言之,是在模拟高负载、高并发的环境下,对系统进行全面测试的过程。它旨在评估系统在面对极端使用条件时的性能表现,包括处理能力、响应时间、资源消耗及稳定性等关键指标。通过压力测试,开发团队能够…...
图片预加载和懒加载
图片预加载 图片预加载是指在页面展示之前提前加载即将使用到的图片资源,以便当用户需要查看时,能够直接从本地缓存中快速渲染,从而提高页面加载速度和用户体验。 原理 图片预加载通过提前将图片下载到浏览器缓存中,当用户实际…...
Java中的数据可视化与图表库选择
Java中的数据可视化与图表库选择 大家好,我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编,也是冬天不穿秋裤,天冷也要风度的程序猿! 在现代软件开发中,数据可视化是将抽象数据转化为易于理解的图形化…...

STM32-TIM定时器
本内容基于江协科技STM32视频内容,整理而得。 文章目录 1. TIM1.1 TIM定时器1.2 定时器类型1.3 基本定时器1.4 通用定时器1.4 高级定时器1.5 定时中断基本结构1.6 预分频器时序1.7 计数器时序1.8 计数器无预装时序1.9 计数器有预装时序1.10 RCC时钟树 2. TIM库函数…...
Python OpenCV与霍夫变换:检测符合特定斜率范围的直线
在计算机视觉和图像处理领域,检测图像中的直线是一项常见且重要的任务。OpenCV 提供了许多强大的工具来进行图像处理,其中霍夫变换(Hough Transform)就是用于检测直线的经典方法。本文将介绍如何使用 OpenCV 和霍夫变换来检测图像…...

ubuntu22.04+pytorch2.3安装PyG图神经网络库
ubuntu下安装torch-geometric库,图神经网络 开发环境 ubuntu22.04 conda 24.5.0 python 3.9 pytorch 2.0.1 cuda 11.8 pyg的安装网上教程流传着许多安装方式,这些安装方式主要是:预先安装好pyg的依赖库,这些依赖库需要对应上pyth…...
新型开发语言的试用感受-仓颉语言发布之际
经常听一些媒体介绍一些新型的开发语言,所以最近心血来潮,安装了几种感受了一些。 先看名气,如ziglang,网址为:Home ⚡Zig Programming Language 号称是可以取代C语言的一门新语言,其实我主要是受下面这篇…...

基于字典学习的地震数据降噪(MATLAB R2021B)
稀疏表示基于研究者们提出了许多变换基函数的方法逐渐成型,比如小波域,曲波域,dreamlet 域等,其原理是利用地震信号在变换域内的稀疏性和可分离性以去除噪声。继 Donoho发表非线性去噪方法-小波阈值萎缩方法,在后续的研…...

【Web】
1、配仓库 [rootlocalhost yum.repos.d]# vi rpm.repo ##本地仓库标准写法 [baseos] namemiaoshubaseos baseurl/mnt/BaseOS gpgcheck0 [appstream] namemiaoshuappstream baseurlfile:///mnt/AppStream gpgcheck0 2、挂载 [rootlocalhost ~]mount /dev/sr0 /mnt mount: /m…...

kafka-3
Kafka 消费组 consumer-offsets-N 稀疏索引 Kafka集群 集群搭建 集群启动和验证 Topic的意义 Topic和Partition 分区 副本 集群操作指令 多分区&多副本 多分区消费组 Rebalance机制 Rebalance机制处理流程 Rebalance机制-Range Rebalance机制-RoudRobin Rebalance机制-St…...
MySQL性能优化 二、表结构设计优化
1.设计中间表 设计中间表,一般针对于统计分析功能,或者实时性不高的需求。 2.设计冗余字段 为减少关联查询,创建合理的冗余字段(创建冗余字段还需要注意数据一致性问题) 3.折表 对于字段太多的大表,考…...

用HttpURLConnection复现http响应码405
目录 使用GET方法,访问GET接口,服务端返回405使用GET方法,访问POST接口,服务端返回405使用POST方法,访问GET接口,服务端返回405 使用GET方法,访问GET接口,服务端返回405 发生场景&a…...

2-27 基于matlab的一种混凝土骨料三维随机投放模型
基于matlab的一种混凝土骨料三维随机投放模型,为混凝土细观力学研究提供一种快捷的三维建模源代码。可设置骨料数量,边界距离、骨料大小等参数。程序已调通,可直接运行。 2-27 matlab 混凝土骨料三维随机投放模型 - 小红书 (xiaohongshu.com)…...
ISA95-Part4-业务流程的解析与设计思路
MES/MOM系统实现ISA-95标准的业务流程通常遵循以下思路,并包含一系列内容。 一、功能模块: 1. 需求分析与规划: - 确定业务流程需求,包括订单管理、生产调度、库存控制等,并规划如何将这些流程与MES/MOM系统集成。 2. 系统集成架构设计: - 设计一个系统集成架构,确保M…...

【Spring Cloud】一个例程快速了解网关Gateway的使用
Spring Cloud Gateway提供了一个在Spring生态系统之上构建的API网关,包括:Spring 5,Spring Boot 2和Project Reactor。Spring Cloud Gateway旨在提供一种简单而有效的路由方式,并为它们提供一些网关基本功能,例如&…...
web vue 项目 Docker化部署
Web 项目 Docker 化部署详细教程 目录 Web 项目 Docker 化部署概述Dockerfile 详解 构建阶段生产阶段 构建和运行 Docker 镜像 1. Web 项目 Docker 化部署概述 Docker 化部署的主要步骤分为以下几个阶段: 构建阶段(Build Stage):…...

C++ Visual Studio 2017厂商给的源码没有.sln文件 易兆微芯片下载工具加开机动画下载。
1.先用Visual Studio 2017打开Yichip YC31xx loader.vcxproj,再用Visual Studio 2022打开。再保侟就有.sln文件了。 易兆微芯片下载工具加开机动画下载 ExtraDownloadFile1Info.\logo.bin|0|0|10D2000|0 MFC应用兼容CMD 在BOOL CYichipYC31xxloaderDlg::OnIni…...

分布式增量爬虫实现方案
之前我们在讨论的是分布式爬虫如何实现增量爬取。增量爬虫的目标是只爬取新产生或发生变化的页面,避免重复抓取,以节省资源和时间。 在分布式环境下,增量爬虫的实现需要考虑多个爬虫节点之间的协调和去重。 另一种思路:将增量判…...

20个超级好用的 CSS 动画库
分享 20 个最佳 CSS 动画库。 它们中的大多数将生成纯 CSS 代码,而不需要任何外部库。 1.Animate.css 一个开箱即用型的跨浏览器动画库,可供你在项目中使用。 2.Magic Animations CSS3 一组简单的动画,可以包含在你的网页或应用项目中。 3.An…...
虚拟电厂发展三大趋势:市场化、技术主导、车网互联
市场化:从政策驱动到多元盈利 政策全面赋能 2025年4月,国家发改委、能源局发布《关于加快推进虚拟电厂发展的指导意见》,首次明确虚拟电厂为“独立市场主体”,提出硬性目标:2027年全国调节能力≥2000万千瓦࿰…...

C++实现分布式网络通信框架RPC(2)——rpc发布端
有了上篇文章的项目的基本知识的了解,现在我们就开始构建项目。 目录 一、构建工程目录 二、本地服务发布成RPC服务 2.1理解RPC发布 2.2实现 三、Mprpc框架的基础类设计 3.1框架的初始化类 MprpcApplication 代码实现 3.2读取配置文件类 MprpcConfig 代码实现…...

篇章二 论坛系统——系统设计
目录 2.系统设计 2.1 技术选型 2.2 设计数据库结构 2.2.1 数据库实体 1. 数据库设计 1.1 数据库名: forum db 1.2 表的设计 1.3 编写SQL 2.系统设计 2.1 技术选型 2.2 设计数据库结构 2.2.1 数据库实体 通过需求分析获得概念类并结合业务实现过程中的技术需要&#x…...
JS红宝书笔记 - 3.3 变量
要定义变量,可以使用var操作符,后跟变量名 ES实现变量初始化,因此可以同时定义变量并设置它的值 使用var操作符定义的变量会成为包含它的函数的局部变量。 在函数内定义变量时省略var操作符,可以创建一个全局变量 如果需要定义…...

Mac flutter环境搭建
一、下载flutter sdk 制作 Android 应用 | Flutter 中文文档 - Flutter 中文开发者网站 - Flutter 1、查看mac电脑处理器选择sdk 2、解压 unzip ~/Downloads/flutter_macos_arm64_3.32.2-stable.zip \ -d ~/development/ 3、添加环境变量 命令行打开配置环境变量文件 ope…...

aurora与pcie的数据高速传输
设备:zynq7100; 开发环境:window; vivado版本:2021.1; 引言 之前在前面两章已经介绍了aurora读写DDR,xdma读写ddr实验。这次我们做一个大工程,pc通过pcie传输给fpga,fpga再通过aur…...