1.vue项目打包

npm run build

会在项目生成dist文件夹,这个文件夹可以使用nginx或tomcat来发布服务

2.查找nginx基础镜像

可以通过以下网站找到符合自己的基础镜像,我们等会儿会在基础镜像基础上构建自己的镜像。

https://hub.docker.com/

3.配置nginx

在项目根目录下创建nginx文件夹,该文件夹下新建文件default.conf(镜像里的配置文件为default.conf,自己安装的window或linux版配置文件为nginx.conf)

server {
listen ;
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 /.html; # redirect server error pages to the static page /50x.html
#
error_page /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}

4.编写Dockerfile文件

在项目根目录创建Dockerfile文件

# 设置基础镜像
FROM nginx:1.16.-alpine
# 将dist文件中的内容复制到 /usr/share/nginx/html/ 这个目录下面
COPY dist/ /usr/share/nginx/html/
#用本地的 default.conf 配置来替换nginx镜像里的默认配置
COPY nginx/default.conf /etc/nginx/conf.d/default.conf

5. 构建镜像

docker build -t test-vue-0.0.1 .

6.启动容器

docker run -d --name test-vue -p : test-vue-0.0.

可以在浏览器访问了

docker部署nginx+vue项目的更多相关文章

  1. Docker 部署 nginx 前端项目

    docker pull nginx docker run -itd -p 82:80 -v /opt/soft/nginx/conf/nginx.conf:/etc/nginx/nginx.conf ...

  2. nginx + uwsgi 部署 Django+Vue项目

    nginx + uwsgi 部署 Django+Vue项目 windows 本地 DNS 解析 文件路径 C:\Windows\System32\drivers\etc 单机本地测试运行方式,调用dj ...

  3. 阿里云安装Nginx+vue项目部署

    阿里云安装Nginx+vue项目部署 nginx安装包下载 http://nginx.org/en/download.html nginx安装 首先先安装PCRE pcre-devel 和Zlib,因 ...

  4. 使用Docker部署Spring-Boot+Vue博客系统

    在今年年初的时候,完成了自己的个Fame博客系统的实现,当时也做了一篇博文Spring-boot+Vue = Fame 写blog的一次小结作为记录和介绍.从完成实现到现在,也断断续续的根据实际的使用 ...

  5. Docker 部署前后端项目

    Docker 部署前后端项目 平生不会相思,才会相思,便害相思. 简介:都是被逼的,从零开始一个Docker 部署九个微服务和三个前端项目.其中,这些服务需要用到Nacos.MySQL.Nginx.E ...

  6. 使用docker部署nginx+tomcat架构(3):使用docker-compose简化部署操作

    经历了之前的两篇,我们已经大体上了解了docker部署容器的过程. 使用docker部署nginx+tomcat架构 使用docker部署nginx+tomcat架构():访问mysql数据库 不过, ...

  7. 使用Docker部署Spring boot项目

    Docker是一个使用广泛的Linux容器管理工具包,它允许用户创建镜像,并将其容器实例化.通过本指南,我们可以学习到如何使用Docker部署Spring Boot项目. 先决条件 开发之前,你必须具 ...

  8. Docker部署Nginx并修改配置文件

    Docker部署Nginx并修改配置文件 一.拉取nginx镜像 docker pull nginx 二.在宿主机中创建挂载目录 mkdir -p /data/nginx/{conf,conf.d,h ...

  9. Docker部署Nginx应用(2)

    Docker部署Nginx应用(2) 1.拉取Nginx镜像 [root@localhost ~]# docker pull nginx Using default tag: latest lates ...

随机推荐

  1. Sql Server有主外键关系时添加、删除数据

    当表之间有主外键关系时删除数据会被约束,添加.删除失败 解决办法,我们可以先把主外键关系的检查约束给关掉 → 然后删除数据 → 之后再把约束打开 查询出关掉所有外键约束的语句 SELECT 'ALTE ...

  2. C#基础--Virtual与abstract区别、重写

    Virtual作用:子类可以对父类重写,虚方法是对多态特征体现.代表一类对象的所具有的公共属性或方法. public class Animal { public string Name { get; ...

  3. java小工具:通过URL连接爬取资源(图片)

    java语言编写一个简单爬取网站图片工具,实现简单: 通过 java.net.HttpURLConnection 获取一个URL连接 HttpURLConnection 连接成功返回一个java.io ...

  4. Python练习_初识函数_day9

    1. 1.作业 1,写函数,检查获取传入列表或元组对象的所有奇数位索引对应的元素,并将其作为新列表返回给调用者. 2,写函数,判断用户传入的对象(字符串.列表.元组)长度是否大于5. 3,写函数,检查 ...

  5. 如何结合插件 vue-lazyload 来简单实现图片懒加载?

    插件地址:https://www.npmjs.com/package/vue-lazyload: 一.使用场景: 在项目中有很多条数的信息,且图片很多的时候,不需要一次把整个页面的图片都加载完,而是在 ...

  6. 【大数据】SmallFile-Analysis-Script

    1.root账号先在namenode节点上配置一个定时任务,将fsimage定时传到其他客户机上进行操作 whereis hadoop命令确定安装目录,然后去配置文件找到namenode节点(data ...

  7. 异常-Exception in thread "main" net.sf.jsqlparser.parser.TokenMgrError: Lexical error at line 1, column 596. Encountered: <EOF> after :

    1 详细异常 Exception in thread "main" net.sf.jsqlparser.parser.TokenMgrError: Lexical error at ...

  8. 【问题】redhat安装dig

    转自:https://blog.csdn.net/ricky_hust/article/details/8868131 最终可行的方法 在linux下没有单独的dig和nslookup的包,而是以bi ...

  9. Window脚本学习笔记之定时关闭进程

     定时关闭进程, 从字面上即可看出操作分为两个步骤,即: 1,结合“任务计划程序”,定时. “计算机->管理->计划任务程序”,作用是让系统定时启动脚本文件(bat脚本). 2,结合“nt ...

  10. Java基础 - Map接口的实现类 : HashedMap / LinkedHashMap /TreeMap 的构造/修改/遍历/ 集合视图方法/双向迭代输出

    Map笔记: import java.util.*; /**一:Collection接口的 * Map接口: HashMap(主要实现类) : HashedMap / LinkedHashMap /T ...