如何将资源前端通过 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旨在提供一种简单而有效的路由方式,并为它们提供一些网关基本功能,例如&…...
基于大模型的 UI 自动化系统
基于大模型的 UI 自动化系统 下面是一个完整的 Python 系统,利用大模型实现智能 UI 自动化,结合计算机视觉和自然语言处理技术,实现"看屏操作"的能力。 系统架构设计 #mermaid-svg-2gn2GRvh5WCP2ktF {font-family:"trebuchet ms",verdana,arial,sans-…...
Cesium1.95中高性能加载1500个点
一、基本方式: 图标使用.png比.svg性能要好 <template><div id"cesiumContainer"></div><div class"toolbar"><button id"resetButton">重新生成点</button><span id"countDisplay&qu…...

Python实现prophet 理论及参数优化
文章目录 Prophet理论及模型参数介绍Python代码完整实现prophet 添加外部数据进行模型优化 之前初步学习prophet的时候,写过一篇简单实现,后期随着对该模型的深入研究,本次记录涉及到prophet 的公式以及参数调优,从公式可以更直观…...
TRS收益互换:跨境资本流动的金融创新工具与系统化解决方案
一、TRS收益互换的本质与业务逻辑 (一)概念解析 TRS(Total Return Swap)收益互换是一种金融衍生工具,指交易双方约定在未来一定期限内,基于特定资产或指数的表现进行现金流交换的协议。其核心特征包括&am…...
Spring是如何解决Bean的循环依赖:三级缓存机制
1、什么是 Bean 的循环依赖 在 Spring框架中,Bean 的循环依赖是指多个 Bean 之间互相持有对方引用,形成闭环依赖关系的现象。 多个 Bean 的依赖关系构成环形链路,例如: 双向依赖:Bean A 依赖 Bean B,同时 Bean B 也依赖 Bean A(A↔B)。链条循环: Bean A → Bean…...
在Ubuntu24上采用Wine打开SourceInsight
1. 安装wine sudo apt install wine 2. 安装32位库支持,SourceInsight是32位程序 sudo dpkg --add-architecture i386 sudo apt update sudo apt install wine32:i386 3. 验证安装 wine --version 4. 安装必要的字体和库(解决显示问题) sudo apt install fonts-wqy…...
JavaScript基础-API 和 Web API
在学习JavaScript的过程中,理解API(应用程序接口)和Web API的概念及其应用是非常重要的。这些工具极大地扩展了JavaScript的功能,使得开发者能够创建出功能丰富、交互性强的Web应用程序。本文将深入探讨JavaScript中的API与Web AP…...
C#学习第29天:表达式树(Expression Trees)
目录 什么是表达式树? 核心概念 1.表达式树的构建 2. 表达式树与Lambda表达式 3.解析和访问表达式树 4.动态条件查询 表达式树的优势 1.动态构建查询 2.LINQ 提供程序支持: 3.性能优化 4.元数据处理 5.代码转换和重写 适用场景 代码复杂性…...

系统掌握PyTorch:图解张量、Autograd、DataLoader、nn.Module与实战模型
本文较长,建议点赞收藏,以免遗失。更多AI大模型应用开发学习视频及资料,尽在聚客AI学院。 本文通过代码驱动的方式,系统讲解PyTorch核心概念和实战技巧,涵盖张量操作、自动微分、数据加载、模型构建和训练全流程&#…...

从物理机到云原生:全面解析计算虚拟化技术的演进与应用
前言:我的虚拟化技术探索之旅 我最早接触"虚拟机"的概念是从Java开始的——JVM(Java Virtual Machine)让"一次编写,到处运行"成为可能。这个软件层面的虚拟化让我着迷,但直到后来接触VMware和Doc…...