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

如何将资源前端通过 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)&#xff1a…...

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万千瓦&#xff0…...

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…...