Docker：前端html页面部署到nginx中

最新推荐文章于 2023-10-08 15:17:18 发布
最新推荐文章于 2023-10-08 15:17:18 发布
阅读量616 收藏 1
点赞数 2
分类专栏： linux 文章标签： linux nginx docker
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45483864/article/details/115334347
版权

在Xftp中，将左边需要部署的前端.zip文件这里以(item-shop为例)拖入到右边/home/ubuntu 路径中，然后将其解压
在这里插入图片描述

若没有unzip工具，则先配置unzip

sudo apt install unzip

解压之后可以进入item-shop文件，查看文件资源
在这里插入图片描述

cd item-shop
ls -l

可以看到其中的文件资源

准备html
在index同层目录下建立Dockerfile
在这里插入图片描述

sudo gedit Dockerfile
FROM nginx:latest
COPY . /usr/share/nginx/html

将前端文件打包生成镜像

sudo docker build -t html:1.0 . 【html:1.0为指定的镜像名:tag】

在这里插入图片描述

之后可以看到我们打包好的镜像了
在这里插入图片描述

然后可以将item-shop运行起来，在浏览器中输入服务器IP地址+端口号可以访问前端页面了

#服务器使用docker 启动镜像
sudo docker run -p 8081:80 --name itemshop -d itemshop:1.0

在这里插入图片描述

在这里插入图片描述

喝水我选娃哈哈
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
docker部署html页面,在Docker容器中部署静态网页的方法教程
weixin_29317963的博客
06-04 4039
前言一般我们在访问容器时需要通过容器的端口来访问，那如何设置容器的端口映射呢？我们通过以下命令来设置：docker run -p ip:hostPort:containerPort [--name] [-i] [-t] 镜像名 [COMMAND][ARG...]ip：表示宿主机iphostPort：宿主机端口号containerPort：容器端口号设置的方式有以下几种：containerPort，...
docker nginx部署网站 html
qq_34461127的博客
04-02 346
首先修改nginx 中的default配置文件 default配置文件内容： server { listen 80; server_name 外网ip; # 避免访问出现 404 错误 location / { root /usr/share/nginx/html; #dist上传的路径 ...
docker部署html页面,Docker 案例： 在容器中部署静态网站
weixin_28839699的博客
06-04 1392
----------------知识点------------容器的端口映射：docker run [-P] [-p]-P，–publish-all=true | false，大写的P表示为容器暴露的所有端口进行映射-p，–publish=[]，小写的p表示为容器指定的端口进行映射，有四种形式----containerPort：只指定容器的端口，宿主机端口随机映射----hostPort:co...
docker+nginx部署静态网页(html)
weixin_30454481的博客
08-10 1898
我看了下网上都是部署单个.html页面的实例。所以今天试试多个.html文件的部署。 因为之前docker部署过vue.js打包的项目，所以按上次部署方式部署。结果还真行，只是这次部署的是小滴课堂上的买的教程，仿美团页面项目。 部署步骤参考上篇：https://www.cnblogs.com/longdb/p/10770661.html 测试链接：http://193.112.8...
纯HTML项目部署在NGINX，不用TOMCAT
yong472727322的博客
07-06 809
nginx中的配置： location / { root /java/tomcatWeb/static_test; # 站点根目录 index index.html; #主页     } 目录结构： 数据通过AJAX请求
docker快速在linux服务器部署java，vue，mysql，nginx和html项目
daitu_的博客
10-08 380
快速部署vue，需要准备两个东西，一个是数据卷（需要发布的项目放在这个目录），一个是配置文件（在服务器本地准备好配置文件，在docker运行的时候进行关联，即可不进入容器内修改nginx配置文件，方便使用）。以下是模板，这个模板分别对80和8090端口各发布了一个项目，80端口是H5项目，8090端口是Vue项目。你只需要把项目放入上一步创建的共享文件夹中，然后使用下面这个配置，你就能直接访问项目了。运行mysql，并绑定服务器本地的data和配置文件，配置文件是需要提前准备好的。在Linux创建文件夹。
docker读取html文件,Docker 部署静态Html文件
weixin_39639514的博客
06-25 681
Create Html FileHello HtmlCreate DockerfileFROM nginx:alpineCOPY . /usr/share/nginx/htmlBuild Docker Imagedocker build -t webserver-ng:v1 .注意最后的点，表示，运行当前目录的Dockerfile查看创建的镜像docker imagesRundocker run ...
nginx+html打包docker image镜像，并部署
wcuu的博客
12-19 3523
准备环境 docker环境 html静态文件 能联网的系统，centos或者windows等，上面有docker 1.创建一个文件夹 /data/nginx-demo mkdir -p /data/nginx-demo 2.上传静态html文件 3.创建DockerFile文件，直接在当前文件夹种创建 FROM nginx:1.15.0 ADD . /usr/share/nginx/html EXPOSE 80 4.执行命令进行打包image镜像 docker build -t nginx-dem
docker部署html页面,容器与云|如何在 Docker 容器中架设一个完整的 WordPress 站点
weixin_28914869的博客
06-04 372
大家好，今天我们来学习一下如何在 Docker 容器里运行的 Nginx Web 服务器中安装 WordPress。WordPress 是一个很好的免费开源的内容管理系统，全球成千上万的网站都在使用它。Docker 是一个开源项目，提供了一个可以打包、装载和运行任何应用的轻量级容器的开放平台。它没有语言支持、框架和打包系统的限制，从小型的家用电脑到高端服务器，在何时何地都可以运行。这使它们可以不依...
Docker中安装Nginx部署网页服务-过程
JackieDYH的博客
02-07 1638
当然，我们这里可以先执行语句docker search nginx查询一下nginx镜像版本，然后指定版本，上面是直接默认最新。
Github Actions + Docker实现HTML静态前端页面CICD部署
Vampire69的博客
07-16 1132
使用Github Actions可以实现CICD自动构建部署。简单来说就是你只需要执行gitpush命令，你服务器上的网页就可以自动部署更新，无需你执行编译指令。
使用容器部署静态（HTML）网站
静静是我女朋友
11-23 2488
使用容器部署静态（HTML）网站 学习如何使用Nginx来创建一个用于运行静态HTML网站的Docker镜像,会解释如何构建一个运行Nginx与HTML网站的Docker镜像,目的是了解如何创建和运行我们自己创建的Docker镜像。 创建Dockerfile Docker图像从基础图像开始。基本映像应该包含应用程序所需的平台依赖项，例如，安装了JVM或CLR，Dockerfile是描述如何部
基于nginx上传一个简单的Html网页到服务器，并进行访问
sunandstarws的博客
03-08 7722
1、首先，要购买一个阿里云服务器（自己配置好，远程登录的密码和用户名等，可以去看阿里云相关帮助文档教程，记得一定配置好安全组规则，要允许一些端口的访问） 2、我使用了xshell远程登录了服务器。xshell下载可以去官网（https://xshell.en.softonic.com/）有点慢哦，再下载一个xftp工具（是xshell配套工具，用于上传文字的工具） 3、远程登录好服务器之后，在...
Nginx部署与静态html
underworld33的博客
02-21 3258
Nginx部署与静态html页面展示
Docker的安装
Baichi_00的博客
10-11 466
Ddcker的安装一.检查并移除：二.安装必要的依赖库：三.安装Docker：四.启动：五.测试： 一.检查并移除： sudo yum remove docker \ docker-client \ docker-client-latest \ docker-common \ ...
nginx的安装和html部署问题
潮汐未见潮落的博客
05-07 6404
nginx的安装使用，常用命令，以及刷新页面报404错误问题
docker + nginx部署静态html页面(访问异常处理)
lovingchq的博客
12-22 1249
文章目录下载docker创建映射80端口的交互式容器安装nginx安装vim编写静态页面修改nginx配置文件启动nginx退出docker查看映射端口注意事项 下载docker [root@VM_0_16_centos /]# curl -fsSL https://get.docker.com | bash -s docker --mirror Aliyun 创建映射80端口的交互式容器 [root@VM_0_16_centos /]# docker run -it -p 80 --name web
docker中部署Nginx及静态页面
攻城狮
07-20 4702
首先我们要在运行容器的时候设置映射端口80 设置容器的端口映射 docker run -p/-P .... 小写的p可以指定某些端口需要映射 大写的P则是全部端口都需要进行映射 示例： 指定容器端口 映射到宿主机端口随机分配  docker run -p 80 -it centos /bin/bash 指定容器端口 映射到宿主机端口的指定8080  docker run -p 8...
Docker容器中部署静态网页
兴国-为梦想而战
03-13 9712
在访问容器时需要通过容器的端口来访问，那如何设置容器的端口映射呢？我们通过以下命令来设置：docker run -p ip:hostPort:containerPort [--name] [-i] [-t] 镜像名 [COMMAND][ARG...]ip：表示宿主机ip hostPort：宿主机端口号 containerPort：容器端口号设置的方式有以下几种： containerPor
dockernginx部署前端页面
最新发布
10-12
要在 Docker 中部署前端页面，可以使用 Nginx 作为 Web 服务器。具体步骤如下： 1. 编写 Dockerfile 文件，指定基础镜像和工作目录，并将前端代码复制到镜像中： ``` FROM nginx:latest WORKDIR /usr/share/nginx/...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值