当前位置: 首页 > 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旨在提供一种简单而有效的路由方式,并为它们提供一些网关基本功能,例如&…...

基于大模型的 UI 自动化系统

基于大模型的 UI 自动化系统 下面是一个完整的 Python 系统,利用大模型实现智能 UI 自动化,结合计算机视觉和自然语言处理技术,实现"看屏操作"的能力。 系统架构设计 #mermaid-svg-2gn2GRvh5WCP2ktF {font-family:"trebuchet ms",verdana,arial,sans-…...

Cesium1.95中高性能加载1500个点

一、基本方式&#xff1a; 图标使用.png比.svg性能要好 <template><div id"cesiumContainer"></div><div class"toolbar"><button id"resetButton">重新生成点</button><span id"countDisplay&qu…...

Python实现prophet 理论及参数优化

文章目录 Prophet理论及模型参数介绍Python代码完整实现prophet 添加外部数据进行模型优化 之前初步学习prophet的时候&#xff0c;写过一篇简单实现&#xff0c;后期随着对该模型的深入研究&#xff0c;本次记录涉及到prophet 的公式以及参数调优&#xff0c;从公式可以更直观…...

TRS收益互换:跨境资本流动的金融创新工具与系统化解决方案

一、TRS收益互换的本质与业务逻辑 &#xff08;一&#xff09;概念解析 TRS&#xff08;Total Return Swap&#xff09;收益互换是一种金融衍生工具&#xff0c;指交易双方约定在未来一定期限内&#xff0c;基于特定资产或指数的表现进行现金流交换的协议。其核心特征包括&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的过程中&#xff0c;理解API&#xff08;应用程序接口&#xff09;和Web API的概念及其应用是非常重要的。这些工具极大地扩展了JavaScript的功能&#xff0c;使得开发者能够创建出功能丰富、交互性强的Web应用程序。本文将深入探讨JavaScript中的API与Web AP…...

C#学习第29天:表达式树(Expression Trees)

目录 什么是表达式树&#xff1f; 核心概念 1.表达式树的构建 2. 表达式树与Lambda表达式 3.解析和访问表达式树 4.动态条件查询 表达式树的优势 1.动态构建查询 2.LINQ 提供程序支持&#xff1a; 3.性能优化 4.元数据处理 5.代码转换和重写 适用场景 代码复杂性…...

系统掌握PyTorch:图解张量、Autograd、DataLoader、nn.Module与实战模型

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

从物理机到云原生:全面解析计算虚拟化技术的演进与应用

前言&#xff1a;我的虚拟化技术探索之旅 我最早接触"虚拟机"的概念是从Java开始的——JVM&#xff08;Java Virtual Machine&#xff09;让"一次编写&#xff0c;到处运行"成为可能。这个软件层面的虚拟化让我着迷&#xff0c;但直到后来接触VMware和Doc…...