Docker容器部署前端Vue服务(小白教程)

目录
  • 需要工具
  • 首先对前端项目进行打包：npm run build
  • 在项目文件夹下编写nginx config配置文件
  • 在项目文件夹下编写Dockerfile文件
  • 构建docker镜像
  • 启动docker容器
  • 查看启动的容器
  • 访问

需要工具

  • Xftp
  • Xshell

首先对前端项目进行打包：npm run build

打包完成

在项目中生成dist文件：

通过Xshell在/home目录下创建项目文件夹

mkdir xxxx（文件名）

通过Xftp将打包的dist文件上传到服务器的项目文件夹下；

利用Xshell在拉起nginx镜像

docker pull nginx

在项目文件夹下编写nginx config配置文件

vim default.conf

default.conf内容如下：

server {
    listen       80;
    server_name  localhost; # 修改为docker服务宿主机的ip

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html =404;
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }
}

该配置文件定义了首页的指向为 /usr/share/nginx/html/index.html, 所以我们可以一会把构建出来的index.html文件和相关的静态资源放到/usr/share/nginx/html目录下。

在项目文件夹下编写Dockerfile文件

vim Dockerfile

Dockerfile内容如下：

FROM nginx

MAINTAINER zouzou

RUN rm /etc/nginx/conf.d/default.conf

ADD default.conf /etc/nginx/conf.d/

COPY dist/ /usr/share/nginx/html/

Dockerfile内容解释

FROM nginx：该镜像是基于nginx:latest镜像构建的

MAINTAINER zouzou：添加说明

RUN rm /etc/nginx/conf.d/default.conf：删除目录下的default.conf文件

ADD default.conf /etc/nginx/conf.d/：将default.conf复制到/etc/nginx/conf.d/下，用本地的default.conf配置来替换nginx镜像里的默认配置

COPY dist/ /usr/share/nginx/html/：将项目根目录下dist文件夹（构建之后才会生成）下的所有文件复制到镜像/usr/share/nginx/html/目录下

如下三个文件保持在同一目录 

构建docker镜像

docker build -t xxxx .

注意不要少了最后的“.”(点)   -t是给镜像命名，.(点)是基于当前目录的Dockerfile来构建镜像

查看刚刚构建的镜像

docker images | grep xxxx

启动docker容器

docker run -d -p 9090:80 --name test xxxx

解释：

  • docker run：基于镜像启动一个容器
  • -d：后台方式启动
  • -p 9090:80: 端口映射，将宿主机的9090端口映射到容器的80端口
  • --name：容器名，我起的叫test
  • xxxx：要启动的镜像名称

查看启动的容器

docker ps

访问

现在我们已经启动了，访问宿主机的地址:9090就可以看到我们部署的网站了

到此这篇关于Docker容器部署前端Vue服务(小白教程)的文章就介绍到这了,更多相关Docker容器部署Vue内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 手把手教你实现Docker 部署 vue 项目

    手把手教你实现Docker 部署 vue 项目

    1.写在前面: Docker 作为轻量级虚拟化技术,拥有持续集成.版本控制.可移植性.隔离性和安全性等优势.本文使用Docker来部署一个vue的前端应用,并尽可能详尽的介绍了实现思路和具体步骤,以方便有类似需要的同学参考. Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,该容器包含了应用程序的代码.运行环境.依赖库.配置文件等必需的资源,通过容器就可以实现方便快速并且与平台解耦的自动化部署方式,无论你部署时的环境如何,容器中的应用程序都会运行在

  • vue-cli3 项目从搭建优化到docker部署的方法

    1. 创建一个vue项目 相信大部分人都已经知道怎么创建项目的,可以跳过这一节,看下一节. 1.1 安装@vue/cli # 全局安装 vue-cli脚手架 npm install -g @vue/cli 等待安装完成后开始下一步 1.2 初始化项目 vue create vue-cli3-project (1)选择一个预设 可以选择默认预设,默认预设包含了 babel , eslint 我们选择更多功能 Manually select features 回车后来到选择插件 (2)插件选择 这边

  • docker部署springboot和vue项目的实现步骤

    docker部署springboot和vue项目的实现步骤

    A. docker 部署 springboot项目 一.springboot项目编译打包 二.在项目根目录创建Dockerfile文件 FROM openjdk:8-jdk-alpine VOLUME /tmp ADD ./target/demo-0.0.1-SNAPSHOT.jar demo.jar RUN sh -c 'touch /demo.jar' ENTRYPOINT ["sh", "-c", "java $JAVA_OPTS -Djava.se

  • Docker镜像+nginx 部署 vue 项目的方法

    一.打包vue项目 在开发完的vue项目输入如下命名,打包生成dist文件夹 yarn build / npm run build 此时根目录会多出一个文件夹:dist文件夹,里面就是我们要发布的东西. 如果将该dist目录整个传到服务器上,部署成静态资源站点就能直接访问到该项目. 二.获取nginx 镜像 nginx 是一个高性能的HTTP和反向代理服务器,此处我们选用 nginx 镜像作为基础来构建我们的vue应用镜像. 在终端输入: docker pull nginx 即可以获取到ngin

  • 使用Docker容器部署Vue程序

    使用Docker容器部署Vue程序

    目录 一.安装Nginx 二.创建Vue程序 1.创建项目 2.编译项目 3.添加Dockerfile文件 4.上传文件 5.构建镜像 6.运行容器 一.安装Nginx 我们部署Vue程序依赖Nginx,首先拉取Nginx的镜像,这里使用Nginx最新的镜像 docker pull nginx 如图所示 我们查看镜像 已经有了nginx镜像. 我们根据nginx镜像运行容器 docker run --name=nginx -d -p 4030:80 nginx 如图所示 然后在浏览器里面访问40

  • Docker容器部署前端Vue服务(小白教程)

    Docker容器部署前端Vue服务(小白教程)

    目录 需要工具 首先对前端项目进行打包:npm run build 在项目文件夹下编写nginx config配置文件 在项目文件夹下编写Dockerfile文件 构建docker镜像 启动docker容器 查看启动的容器 访问 需要工具 Xftp Xshell 首先对前端项目进行打包:npm run build 打包完成 在项目中生成dist文件: 通过Xshell在/home目录下创建项目文件夹 mkdir xxxx(文件名) 通过Xftp将打包的dist文件上传到服务器的项目文件夹下: 利

  • docker Compose部署springboot+vue前端端分离

    docker Compose部署springboot+vue前端端分离

    目录 (一) 准备工作 一.安装 二.修改生产环境下的配置以及打包操作: (二) 开始部署 一.blog_api 制作镜像 二.dockerCompose编排 三.mysql.redis.nginx的配置: 四.导入数据[数据库表的数据.前端静态web资源] 五.测试并排除错误: 温馨提示:如果有自己的服务器最好不过了,这样部署网项目就可以上线了.没有的话,只能使用localhost 本机访问啦,记得替换 ngixn 中的ip地址.域名为localhost. (一) 准备工作 一.安装 1.安装

  • docker+Nginx部署前端项目的详细过程记录

    目录 相关配置安装 创建配置文件 项目打包与部署 一个相关报错: 总结 相关配置安装 安装Docker yum install docker 启动服务 start docker systemctl start docker Docker中拉取nginx镜像 docker pull nginx 创建配置文件 我们需要在根目录下创建Dockerfile文件和default.conf文件. 其中default.conf文件的名称是什么无所谓,只要在配置文件中注意使用相同名称即可. Dokcerfile

  • Docker容器部署consul的详细步骤

    Docker容器部署consul的详细步骤

    目录 Consul简介 Consul 使用场景 -consul部署- 容器服务自动加入consul集群 安装Gliderlabs/Registrator Gliderlabs/Registrator 测试服务发现功能是否正常 安装consul-template 安装nginx 配置并启动template Consul简介 Consul 是一个支持多数据中心分布式高可用的 服务发现 和 配置共享 的服务软件,由 HashiCorp 公司用 Go 语言开发, 基于 Mozilla Public Li

  • Armbian5.9.0安装docker及部署可视化portainer的详细教程

    Armbian5.9.0安装docker及部署可视化portainer的详细教程

    目录 安装 docker 如何查看 docker 是否安装成功? 如何启动docker? 如何安装可视化portainer 安装英文版本 安装中文版 什么是docker?Docker是一个开源的引擎,可以轻松的为任何应用创建一个轻量级的.可移植的.自给自足的容器.开发者在笔记本上编译测试通过的容器可以批量地在生产环境中部署,包括VMs(虚拟机). bare metal.OpenStack 集群和其他的基础应用平台. Docker通常用于如下场景: web应用的自动化打包和发布: 自动化测试和持续

  • Spring boot项目部署到云服务器小白教程详解

    本篇文章主要介绍了Spring boot项目部署到云服务器小白教程详解,分享给大家,具体如下: 测试地址:47.94.154.205:8084 一.Linux下应用Shell通过SSH连接云服务器 //ssh 用户名@公网IP ssh josiah@ip // 输入密码 二.开始搭建SpringBoot的运行环境 1．安装JDK并配置环境变量 1) 打开JDK官网 www.oracle.com 2) 找面最新对应的JDK版本,下载 这里要注意的一个问题是:云服务器下载JDK时一定要在本地去ora

  • 关于docker容器部署redis步骤介绍

    目录 1 redis配置文件 2 docker命令启动 3 docker-compose启动 1 redis配置文件 官方下载:redis.conf 路径:在容器中,一般可以保存在/etc/redis/redis.conf 路径中 配置文件详解,根据实际情况进行修改: # 这里的bind指的是只有指定的网段才可以访问redis,注释后则没有这个限制 # bind 127.0.0.1 # 默认端口为6379 port 6379 # daemonize表示是否以守护进程进行执行,容器中执行必须设置成

  • 前端Vue单元测试入门教程

    目录 一.为什么需要单元测试 二.如何写单元测试 三.测试工具 四.Jest入门 安装 简单示例 Jest Cli 使用配置文件 使用 Babel vue-cli 中使用 Jest 常见示例 判断值相等 检查类false值 数字大小比较 字符串比较 数组和类数组 异常 只执行当前test 测试异步代码 回调函数 Promises Async/Await 安装和拆卸 测试前和测试后 测试用例分组 执行顺序 mock 函数 测试mock mock的返回值 模拟接口返回 mock函数的匹配器 五.Vu

  • SpringBoot项目docker容器部署实现

    SpringBoot项目docker容器部署实现

    目录 一.修改docker.service,使其暴露2375端口 二.netstat -tulp查看端口情况 三.添加依赖 四.在idea中 Settings->Docker配置远程docker的地址 五.配置Dockerfile文件 六.配置docker容器以及镜像等相关信息 七.启动顺序 八.测试访问 一.修改docker.service,使其暴露2375端口 使用命令: vi /lib/systemd/system/docker.service 在ExecStart=*******后加入如

随机推荐