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

一、打包vue项目

　　在开发完的vue项目输入如下命名，打包生成dist文件夹

yarn build / npm run build

　　此时根目录会多出一个文件夹：dist文件夹，里面就是我们要发布的东西。

　　如果将该dist目录整个传到服务器上，部署成静态资源站点就能直接访问到该项目。

二、获取nginx 镜像

　　nginx 是一个高性能的HTTP和反向代理服务器，此处我们选用 nginx 镜像作为基础来构建我们的vue应用镜像。

　　在终端输入：

docker pull nginx

　　即可以获取到nginx镜像。

　　Docker镜像是一个特殊的文件系统，除了提供容器运行时所需的程序、库、资源、配置等文件外，还包含了一些为运行时准备的一些配置参数（如匿名卷、环境变量、用户等）。 镜像不包含任何动态数据，其内容在构建之后也不会被改变。

　 在终端输入如下命令，可以看到nginx的镜像

docker image ls

　　镜像结果如下所示：

三、创建 nginx config配置文件

　　在项目根目录下创建nginx文件夹，该文件夹下新建文件default.conf

server {
  listen    80;
  server_name localhost;

  #charset koi8-r;
  access_log /var/log/nginx/host.access.log main;
  error_log /var/log/nginx/error.log error;

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

  #error_page 404       /404.html;

  # redirect server error pages to the static page /50x.html
  #
  error_page  500 502 503 504 /50x.html;
  location = /50x.html {
    root  /usr/share/nginx/html;
  }
}

　　 注意⚠️：如果vue-router使用的是history模式，try_files $uri $uri/ /index.html; 非常重要！！！

　　因为我们的应用是单页客户端应用，如果后台没有正确的配置，当用户在浏览器访问地址时，就会返回404。

　　所以需要在服务端增加一个覆盖所有情况的候选资源，如果URL匹配不到任何静态资源，则应该返回同一个index.html页面，这个页面就是你app依赖的页面。

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

四、创建 Dockerfile 文件

# 设置基础镜像
FROM nginx
# 定义作者
MAINTAINER lihui <1107136746@qq.com>
# 将dist文件中的内容复制到 /usr/share/nginx/html/ 这个目录下面
COPY dist/ /usr/share/nginx/html/
#用本地的 default.conf 配置来替换nginx镜像里的默认配置
COPY nginx/default.conf /etc/nginx/conf.d/default.conf

五、基于该Dockerfile构建vue应用镜像

　　运行如下命令，注意不要少了最后的“ . ”

docker build -t test .

　　-t 是给镜像命名 ，test是生成镜像的名字，. 是基于当前目录的Dockerfile来构建镜像。

　　基于vue的镜像就生成好了！

以上就是Docker镜像+nginx 部署 vue 项目的方法的详细内容，更多关于docker部署vue项目的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • 使用Docker Compose 实现nginx负载均衡的方法步骤

    以Docker的网络管理,容器的IP设置为基础知识实现Nginx负载均衡 查看所有docker网络 docker network ls /* NETWORK ID NAME DRIVER SCOPE b832b168ca9a bridge bridge local 373be82d3a6a composetest_default bridge local a360425082c4 host host local 154f600f0e90 none null local */ // compose

  • Docker容器简单部署nginx过程解析

    1.容器中部署nginx服务 centos:7镜像运行一个容器,并且,在这个容器内部署Nginx服务. [root@Docker ~]# docker pull centos:7 //下载镜像 [root@Docker ~]# docker run -itd --name webapp --restart=always centos:7 //运行一个容器名为:webapp [root@Docker ~]# docker cp nginx-1.16.0.tar.gz webapp:/root //

  • Docker中使用Nginx代理多个应用站点的方法

     前言 代理的作用是什么? - 多个域名解析到同一个服务器 - 方便一台服务器多个应用只对外开放一个端口 - 访问应用不需要带着烦人的端口,直接域名访问 - 应用隔离 - 降低耦合度 - ... 总的来说就是方便维护,并且在维护一个应用的时候,不影响其他应用. 如何代理 (容器间如何通信)? 直接使用 nginx 的代理功能即可 (相关能力另行查阅),这里麻烦的就是 docker 容器间的通信. Docker 容器间通信的主要方式有以下 4 种: - 通过容器 IP 访问:容器重启后,IP 会发

  • Docker搭建Nginx图片服务器的方法

    前言 一般开发中,都会把图片上传到一个目录,然后将目录和文件名拼接存储在数据库中,但是,这种方法如果没弄好的话可能有一定的缺陷. 若项目搬迁,即时这台服务器本身还在用,存放在服务器的跟项目相关的图片也要跟着搬迁,同时还要修改代码,会造成较多麻烦.如果搭建一个专门存放图片的服务器,而且通过ftp传输,那么你的代码就不用改了. 关于Docker和Nginx的介绍和优点在这里就不展开了,网上博客和教程也有很多. 环境搭建 环境搭建有些模块可能不够详细,如果想知道更多的话可以查看其他资料,这里只是简单操

  • Docker部署nginx并修改配置文件的实现方法

    docker 部署个nginx,简直太简单了好吧 直接一行命令搞定: docker run \ --name nginx-health-web-pc \ -d -p 6800:80 \ -v /usr/docker/nginx/html:/usr/share/nginx/html \ nginx 运行启动不亦乐乎~~~~~这时候忽然前端过来说:"你的nginx里得加一个配置",顺带还告诉你:"某某某以前就是这样配的", 此时好胜的你当然不能拒绝,但是真正配置起来还是

  • docker搭建php+nginx+swoole+mysql+redis环境的方法

    操作系统:阿里云esc实例centos7.4 软件:docker-ce version 18.09.3, docker-compose version 1.23.2 一.创建带有swoole-redis-pdo_mysql-gd扩展的docker image 1.创建dockerfile文件 vim dockerfile 2.在dockerfile文件写入 From php:7.1-fpm RUN apt-get update && apt-get install -y \ libfree

  • Docker部署Django+Mysql+Redis+Gunicorn+Nginx的实现

    一. 前言 docker技术现在非常火热,通过容器构建项目环境,运行效率和部署效率都很不错.所以最近抽空看了一些教程,然后将博客部署方式改为了docker,感觉网上没有特别好的关于 docker 部署 django 项目的教程,特意写了这篇文章,算是记录自己的心得. 本次教程的测试环境为 Deepin ,主要侧重于 容器的编排 和 Django 相关部署知识,一些细节方面,例如环境依赖安装,不会讲得特别详细.由于是在本地测试,所以在配置 nginx 相关信息时,将配置 http 代理而非 htt

  • 使用dockercompose搭建springboot-mysql-nginx应用

    上篇使用docker构建spring-boot应用,是把编译好的jar包构建到镜像中. 这篇是把spring-boot连同数据库,做为一组docker服务运行起来. 这里只是把自己操作记录下来,完整运行的代码见"参考"中的引用1中的内容. (我修改mysql映射目录及获取远程ip的方法) 主要步骤: 搭建简单的springboot应用 应用添加docker下支持 编写dockercompose配置文件 实践运行 搭建简单的springboot应用 做一个web应用,统计访问该站点的ip

  • Docker+keepalived+nginx实现主从热备的方法示例

    前言 为解决单点故障,我们需要配置主从热备方案,服务器数量有限,故使用Docker模拟安装配置. 本次配置默认已经安装了Docker. 配置环境:centos7 64位 docker版本:Docker version 17.12.1-ce, build 7390fc6 1,拉取centos7镜像 docker pull centos:7 2,创建容器 docker run -it -d --name centos1 -d centos:7 3,进入容器centos1 docker exec -i

  • 详解docker nginx 容器启动挂载到本地

    首先nginx容器内部的结构: 进入容器: docker exec -it b511b6049f57 bash 查看容器的结构目录:其实每一个容器就相当于一个独立的系统. root@b511b6049f57:/# ls bin dev home lib64 mnt proc run srv tmp var boot etc lib media opt root sbin sys usr nginx的结构目录在容器中: 日志位置:/var/log/nginx/ 配置文件位置:/etc/nginx/

  • 基于docker搭建nginx文件服务器的方法步骤

    1.在本机新建配置文件docker_nginx.conf server { listen 7070; server_name localhost; charset utf-8; location /files { #在docker内nginx的目录 alias /home/files; expires 1d; allow all; autoindex on; } 2.启动命令 docker run --name nginx -d -p 7070:7070 -v D:\dev\nginx-1.13

  • 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 部署 vue 项目

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

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

随机推荐