Docker部署单页应用的详细操作

目录
  • 1. Docker 介绍
  • 2. Docker 安装
  • 3. Docker 基本操作
  • 4. Vue 应用镜像
    • 4.1 Dockerfile 配置文件
      • 什么是 Dockerfile?
    • 4.2 编写 Nginx 配置文件
    • 4.3 构建镜像
  • 5. 创建容器与启动
  • 总结

1. Docker 介绍

Docker 是一个基于 GO 语言和 Linux 内核的虚拟化容器技术,遵从 Apache2.0 协议开源。

Docker 与虚拟机给人的感觉比较相似,但是两者的实现原理不同:Docker 是虚拟化操作系统,而虚拟机则是虚拟化硬件设备。Docker 可利用 Linux 内核来创建独立的 Linux 容器,只占用一组与操作系统隔离的进程,就可以创建一个内部环境保持不变的容器。这种方式也更加利于项目迁移和运行,并且相比虚拟机,也省去了大量的系统配置和资源占用。

2. Docker 安装

windows 环境下安装 Docker 需要安装桌面端,直接在 Docker - Get Started 页面下载对应的 Docker Desktop 安装包安装即可。

3. Docker 基本操作

因为 Docker 是一种虚拟化容器技术,所以最常用的操作就是“容器”「Container」的操作;另外容器的创建也需要一个基础的创建模板,这个模板就是“镜像”「Image」。

这里简单介绍一下与镜像和容器相关的几个基本操作:

# docker拉取镜像,例如 docker pull nginx:1.21.6
docker pull 镜像别名:版本号
# 删除镜像,例如 docker rmi nginx:1.21.6
docker rmi 镜像id/镜像name
# 查看镜像列表
docker images

# 查看容器列表, 不加-a查看正在运行的,加上-a查看所有容器
docker ps -a
# 启动容器
#(-d 后台运行, --name 容器别名, -p 宿主机端口:容器端口, --network 桥接网络别名, 最后是镜像名称:镜像版本)
docker run -d  --restart always --name vue-app-container -p 3006:3006 vue-app:1.0.0
# 关闭一个已启动容器,例如 docker stop vue-app-container
docker stop 容器ID/容器别名
# 启动一个关闭的容器 ,例如 docker start vue-app-container
docker start 容器ID/容器别名
# 删除容器,例如 docker rm vue-app-container
docker rm 容器ID/容器名
# 查看一个容器的详情 ,例如 docker inspect vue-app-container
docker inspect 容器ID/容器别名
# 进入容器内部,例如 docker exec -it vue-app-container /bin/bash
docker exec -it 容器ID/容器别名 /bin/bash

4. Vue 应用镜像

这里不论是 Vue 应用还是 React 之类的应用,都可以用这样的方式发布;Vite 和 Webpack 也可以不做区分

首先,Vue 之类的单页应用,不论是用 Vite 还是 Webpack,都需要将对应的项目代码打包成普通的 js、css 等文件,最后通过 Nginx 等进行发布。

所以,创建单页应用镜像的第一步就是打包。

Docker 创建镜像的方式有:

  • 基于远程 pull 的镜像创建
  • 本地导入镜像(也可以看做是直接使用)
  • 基于 Dockerfile 创建(最常用的创建方式)

4.1 Dockerfile 配置文件

什么是 Dockerfile?

Dockerfile 是一个用来构建镜像的文本文件,文本内容包含了一条条构建镜像所需的指令和说明。

---摘自“菜鸟教程”

Dockerfile 文件的第一行命令,都是 FROM 命令,表示依赖的镜像。因为我们创建的镜像基本上都不会从0开始,最低都会依赖一个系统镜像。

文件内每条执行命令都以一个关键词作为开始,常用命令有:

  • FROM: 依赖镜像
  • RUN:需要执行的 shell 命令
  • COPY:文件复制命令
  • CMD:镜像容器运行时执行的命令
  • ENV:环境变量,一般会在 Dockerfile 文件内部预先定义
  • ARG:构建参数,类似环境变量,仅在 build 镜像时定义
  • VOLUME:需要挂载的数据卷,将容器内的某个数据卷映射为宿主机的磁盘位置,可以避免容易过大或者数据丢失
  • EXPOSE:仅声明使用端口,只有在运行容器时没有指定端口的时候自动映射到这里指定的端口

4.2 编写 Nginx 配置文件

在构建 Docker 镜像时,虽然可以执行一些命令,但是基本上不会通过命令来创建一个 nginx 配置文件。所以,我们需要在项目目录中创建一个 nginx.conf 文件。

### :::
### 服务器 nginx 配置,请勿改变 listen 端口
### :::
server {
    listen       80;
    server_name  localhost;

    root   /usr/share/nginx/vue-app;

    location / {
        try_files $uri $uri/ /index.html;
        index  index.html index.htm;
    }

    # 接口转发
    location ~* ^\/(sys|app)\/ {
       proxy_pass                 http://app-server:8080;
       proxy_redirect             off;
       proxy_set_header           Host $host;
       proxy_set_header           X-Real-IP $remote_addr;
       proxy_set_header           X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

这个 nginx.conf 文件仅作为示例,需要根据实际情况修改。

4.3 构建镜像

在执行镜像构建命令之前,我们需要在根目录下创建一个 Docker 配置文件 Dockerfile

# 配置 nginx 资源转发, alpine 为纯净版本
FROM nginx:1.21.6

# 服务器环境
COPY dist/ /usr/share/nginx/hwiot-web/

COPY nginx.conf /etc/nginx/conf.d/default.conf

这个文件仅仅是将外部打包后的 dist 文件夹里面的内容,复制到容器内的 /usr/share/nginx/vue-app/ 内,在复制 nginc.conf 文件到 /etc/nginx/conf.d/default.conf 作为默认 Nginx 配置。

之后执行构建命令:

docker build -t vue-app:1.0.0 .

注意后面的 .

这一步会默认在当前目录查找 Dockerfile 文件并进行镜像构建,并且用 -t 指定镜像名和镜像版本号。

5. 创建容器与启动

在上一步镜像创建完成之后,就可以根据该镜像创建容器了。

docker run -p 80:80 -d -name vue-app-container vue-app

这里指定了将容器的 80 端口映射到宿主机的80,端口,这样我们直接在本地打开浏览器访问 http://localhost 即可。

总结

到此这篇关于Docker部署单页应用的文章就介绍到这了,更多相关Docker部署单页应用内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Docker如何部署您的第一个应用程序

    上一篇,您已经完成了Docker Desktop安装,并启用了Kubernetes,接下来就可容器化部署应用程序了.通常,开发工作流包括如下几点: 1.首先创建Docker镜像,为应用程序的每个组件创建和测试单个容器. 2.将容器和所支持的基础设施组装成一个完整的应用程序,可以用Docker stack file或者Kubernetes的YAML来实现. 3.测试.共享和部署完整的容器化应用程序. 在本篇幅中,我们将集中于此工作流的步骤1:基于现有的容器来创建镜像.请记住,Docker镜像捕获了

  • Ubuntu Docker 的安装部署及简单应用

    Docker直译为码头工人.当它成为一种技术时,做的也是码头工人的事.官网是这样描述它的:"Docker是一个开发的平台,用来为开发者和系统管理员构建.发布和运行分布式应用."也就是说,如果把你的应用比喻为货物,那么码头工人(Docker)就会迅速的用集装箱将它们装上船.快速.简单而有效率. 它是用Go语言写的,是程序运行的"容器"(Linux containers),实现了应用级别的隔离(沙箱).多个容器运行时互补影响,安全而稳定. 我喜欢它的原因就是快速部署,安

  • 在Docker上开始部署Python应用的教程

    几周前, Elastic Beanstalk声明在AWS云中配置和管理Docker容器.在本文中,我们通过一个简单的注册表单页面应用去理解Docker部署过程,该表单使用Elastic Beanstalk Python环境. 关于注册表单应用 几个月之前,我们就已经开发完这个应用并且发表在博客上.有4部分视频和一篇文章"Using DynamoDB and SNS with Elastic Beanstalk in any Supported AWS Region".今天,我们将在这部

  • 尝试Docker+Nginx部署单页应用方法

    开发到部署,亲力亲为 当我们开发一个单页面应用时,执行完构建后 npm run build 会生成一个 index.html 在 dist 目录,那怎么把这个 index.html 部署到服务器上呢? 目录结构 dist/:前端构建完的静态文件 docker/:镜像所需的配置文件 配置 Nginx 挑几点配置讲讲,先是 Gzip 压缩资源,以节省带宽和提高浏览器加载速度 虽然 Webpack 已经支持在构建时就生成 .gz 压缩包,但也可以通过 Nginx 来启用 gzip on; gzip_d

  • 如何使用docker部署前端应用的方法步骤

    docker 变得越来越流行,它可以轻便灵活地隔离环境,进行扩容,方便运维管理.对开发者也更方便开发,测试与部署. 最重要的是, 当你面对一个陌生的项目,你可以照着 Dockerfile,甚至不看文档(文档也不一定全,全也不一定对)就可以很快让它在本地跑起来. 现在很强调 devops 的理念,我把 devops 五个大字放在电脑桌面上,格物致知了一天.豁然开朗,devops 的意思就是写一个 Dockerfile 去跑应用(开玩笑. 这里介绍如何使用 Docker 部署前端应用.千里之行,始于

  • 在Docker快速部署Node.js应用的详细步骤

    一.前言 可能还有一些同学不了解docker这个项目,docker是由go语言编写的,一个快速部署的轻量级虚拟技术项目,他允许开发人员将自己的程序和运行环境一起打包,制作成一个docker的image(镜像),这样部署到服务器上,也只需要下载这个image就可以将程序跑起来,免去每次都安装各种依赖和环境的麻烦,还能够做到应用程序之间的隔离 二.实现准备 我会先创建一个简单的Node.js web app,来构建一个镜像.然后基于这个Image运行一个container.从而实现快速部署. 由于网

  • Docker部署单页应用的详细操作

    目录 1. Docker 介绍 2. Docker 安装 3. Docker 基本操作 4. Vue 应用镜像 4.1 Dockerfile 配置文件 什么是 Dockerfile? 4.2 编写 Nginx 配置文件 4.3 构建镜像 5. 创建容器与启动 总结 1. Docker 介绍 Docker 是一个基于 GO 语言和 Linux 内核的虚拟化容器技术,遵从 Apache2.0 协议开源. Docker 与虚拟机给人的感觉比较相似,但是两者的实现原理不同:Docker 是虚拟化操作系统

  • 使用docker部署hadoop集群的详细教程

    最近要在公司里搭建一个hadoop测试集群,于是采用docker来快速部署hadoop集群. 0. 写在前面 网上也已经有很多教程了,但是其中都有不少坑,在此记录一下自己安装的过程. 目标:使用docker搭建一个一主两从三台机器的hadoop2.7.7版本的集群 准备: 首先要有一台内存8G以上的centos7机器,我用的是阿里云主机. 其次将jdk和hadoop包上传到服务器中. 我安装的是hadoop2.7.7.包给大家准备好了,链接:https://pan.baidu.com/s/15n

  • IDEA连接远程服务器Docker部署Spring Boot项目的详细教程

    开始前的准备工作 拥有一台云服务器,我的是腾讯云服务器(CentOS7) 腾讯云服务器安装Docker,我的版本是Docker 19.03.9,关于安装和配置镜像加速器可以查阅我的另一篇博文:https://www.jb51.net/article/188048.htm,其中有详细的讲解 Windows上有安装IDEA 正式开始工作 第一步:配置Docker,开启远程访问(注:仅供学习参考,实际生产环境万万不可,会产生很大的安全风险),默认端口是2375,也可以修改为其他端口 1.修改/lib/

  • .NET 6 从0到1使用Docker部署至Linux环境超详细教程

    目录 前言 环境准备 .NET Core项目准备 1.首先我们先创建一个空的ASP.NET Core Web应用 2.我们可以先在本地将项目构建成镜像看看效果 3.接下来我们将镜像run起来,构造出一个容器: Linux环境配置: 1.配置yum 更新yum包 安装yum-utils 用来管理yum源 查看资源库中有没有安装过的docker rpm包 2.安装docker 3.启动docker 4.安装.NetCore SDK 6.0 安装包配置 执行安装 验证安装环境 调整Dockerfile

  • Linux系统docker部署.net core3.1的详细步骤

    此篇文章演示基本的基于docker部署.netcore服务,linux系统腾讯云ubuntu,.net core版本3.1. 1.安装docker apt install docker.io 2.拉取.net core依赖镜像 docker pull mcr.microsoft.com/dotnet/core/aspnet:latest 3.创建.net core3.1项目 选择docker支持,会生成dockerFile配置文件如图: 4.编写dockerfile文件,经删减后为: FROM

  • Docker部署搭建WebDav服务的详细过程

    目录 问题分析 部署 前言 教程 问题分析 最近在用学校机房中的服务器搭建一个文件共享服务,前期使用了宝塔面板一键搭建了 FTP 服务器,使用一切正常.但是最近在使用其观看存储的视频文件时播放体验并不友好,决定更换共享服务. samba 可能由于端口等问题一直未能成功连接,且搭建过程较为复杂.DLNA 使用 minidlna 的搭建异常方便,但是在安卓手机上的 nplayer 和 vlc 不能通过 zerotier 搭建的虚拟局域网搜索到 DLNA 服务.NFS 由于未知原因也未能在 zerot

  • 阿里云esc服务器Docker部署单节点Mysql的讲解

    1.下载加速版msyql   docker pull hub.c.163.com/library/mysql:5.7 2.更名 docker tag hub.c.163.com/library/mysql:5.7 mysql:5.7 3.启动 docker run -it --rm --name mysql -e MYSQL_ROOT_PASSWORD=123456 -p 3306:3306 -d mysql 4.设置mysql远程登录 docker exec -it mysql bash my

  • Docker 部署RocketMQ的详细操作

    拉取镜像 docker search rocketmq docker pull foxiswho/rocketmq:4.8.0 启动NameServer docker run -d --name rmqnamesrver -e "JAVA_OPT_EXT=-Xms512M -Xmx512M -Xmn128m" -p 9876:9876 foxiswho/rocketmq:4.8.0 sh mqnamesrv 启动Broker 创建挂在目录 mkdir -p /data/docker/r

  • centos8使用Docker部署Django项目的详细教程

    引言 在本文中将介绍在Docker中通过django + uwsgi + nginx部署方式部署Django项目, 由于记录的是学习过程,使用的都是目前较高的版本. python  版本为3.8.3 django  版本为3.0.6 nginx   版本为1.17.10 好了简单的介绍之后,就进入正题了. 创建一个工作目录 创建一个工作目录用来存放项目,和Dockerfile等文件. mkdir uwsgidocker 简单说明一下各个文件 docker-compose.yml: Docker

随机推荐