ngnix 部署 vue项目-基础篇

ngnix 部署 vue项目-基础篇

标签(空格分隔): docker ngnix vue Dockerfile


目录

  • 基础知识
  • 主要知识点

###1.基础知识

  • image container
  • docker 命令 build run rm rmi exec
  • Dockerfile
  • npm 打包vue项目

###2.主要知识点

  • Dockerfile image container 简单来讲,Dockerfile构建出Docker镜像,通过Docker镜像运行Docker容器。
  • Dockerfile 包含构建image的指令
    
    #基于centos镜像
    FROM centos #引用指定基础镜像

#维护人的信息
MAINTAINER The CentOS Project

#安装httpd软件包 构建image操作
RUN yum -y update
RUN yum -y install httpd

#开启80端口 生命服务端口
EXPOSE 80

#复制网站首页文件至镜像中web站点下
ADD index.html /var/www/html/index.html

#复制该脚本至镜像中,并修改其权限
ADD run.sh /run.sh
RUN chmod 775 /run.sh

#当启动容器时执行的脚本文件
CMD ["/run.sh"]

>生产案例:

#引用指定镜像 可通过 docker images查看本机镜像
FROM harbor.neuqsoft.com/common/nginx:1.15.1

#删除操作
RUN rm /etc/nginx/conf.d/default.conf #注:Dockerfile内所有路径信息均为 docker内部虚拟路径非服务器实际路径
ADD default.conf /etc/nginx/conf.d/

#将当前目录文件复制到docker内部指定虚拟路径
ADD work/nginx/config/nginx/conf.d /etc/nginx/conf.d
ADD work/nginx/config/nginx/sites-enabled /etc/nginx/sites-enabled
ADD work/nginx/config/nginx/nginx.conf /etc/nginx/nginx.conf
COPY dist/ /usr/share/nginx/html/


> * docker build 命令 主要参数 -t  -f -t
>> *        -t 镜像的名字及标签,通常 name:tag 或者 name 格式;可以在一次构建中为一个镜像设置多个标签。
>> *            -f 指定要使用的Dockerfile路径;
>> *            -t 对 Dockerfile 进行语法检查

#docker build 实例 在当前目录下Dockerfile构建一个datashare-test 镜像 注:最后的.不能忘记
docker build -t datashare-test .
#docker build 实例 在指定目录下Dockerfile构建一个datashare-test 镜像
docker build -t datashare-test -f /business/vue/Dockerfile .

> * docker run命令  主要参数 -d -p --name
>> *        -d 后台运行容器,并返回容器ID
>> *        -p 指定端口映射,格式为:主机(宿主)端口:容器端口
>> *        --name 为容器指定一个名称

docker run -d -p 2080:2080 --name datashare-ui [image name]

> * docker exec命令 主要参数 -i -t

#开启一个伪终端进入docker 容器内部
docker exec -it [docker container name] /bin/bash

> * docker rm rmi ps images 命令

#根据容器名称或id 进行强制删除
docker rm -f [docker container name/id]
#根据镜像名称或id 进行强制删除
docker rmi -f [docker images name/id]
#罗列当前所有容器(包含启动和非启动)
docker ps -a
#批量删除 未启动容器 (已启动容器无法正常删除) -q只显示容器ID。
docker rm $(docker ps -a -q)
#罗列当前所有镜像
docker images -a

原文地址:https://blog.51cto.com/85608547/2485186

时间: 2024-07-30 08:48:27

ngnix 部署 vue项目-基础篇的相关文章

CentOS7 安装nginx部署vue项目

简单描述:代码开发完了,需要环境来运行测试.服务器上没有nginx,搞起搞起. 在Centos下,yum源不提供nginx的安装,可以通过切换yum源的方法获取安装.也可以通过直接下载安装包的方法,**以下命令均需root权限执行**:   首先安装必要的库(nginx 中gzip模块需要 zlib 库,rewrite模块需要 pcre 库,ssl 功能需要openssl库).选定**/usr/local**为安装目录,以下具体版本号根据实际改变. 安装:1.安装gcc gcc-c++(如新环境

gitee之部署vue项目dist目录

gitee之部署vue项目dist目录 功能描述:将vue项目中打包后的dist目录使用Gitte pages部署,使其可以访问. 问题:部署后文件路径找不到 解决方法:配置vue.config.js中的publicPath属性,将部署项目项目名配置在publicPath属性中,例: publicPath: '/skymapcoordinatetool/', 注意: 1.publicPath在vue3.3之前为baseUrl属性,在3.3后废除 2.outputDir.assetsDir.ind

Vue.js基础篇实战--一个ToDoList小应用

距离开始学Vue已经过去一个多月了,总想把学到的东西柔和在一起,做点东西出来,于是有了这个Todolist小应用. 主要功能就是把一天要做的事情记录下来,还实现了: 标记完成事件 删除已完成事件 各种排序 仅显示未完成的项目 本地保存 截图看这里 用时一周,14次commits,把心中的构想基本实现了.详情请看:这里 整个过程下来,收获还是很多的, 1.对mvvm有了进一步的理解, 2.对css布局有了更多的了解. 3.更进一步理解了Vue的事件和组件机制.这些机制将应用解耦,每一部分都隔离出来

docker-compose 部署 Vue+SpringBoot 前后端分离项目

一.前言 本文将通过docker-compose来部署前端Vue项目到Nginx中,和运行后端SpringBoot项目 服务器基本环境: CentOS7.3 Dokcer MySQL 二.docker-compose 部署Vue+SpringBoot 前后端分离项目 整体项目配置结构,这里在不影响原来项目的结构,因此将所有配置文件都提出来存放到docker文件夹内了,但注意docker-compose文件须放到项目总的根目录下哦! 1.新增后端所需配置文件api-Dockerfile # 指定基

记基于docker+gunicorn部署sanic项目遇到的很多很多坑

前言: 最近有个项目需要上线,是python中sanic网络异步框架写的,并且要求使用docker+nginx来部署项目实现负载均衡,于是乎百度了sanic项目部署,基本上都是基于docker+gunicorn部署sanic项目这篇文章,里面讲的也稍稍微有些简略,不过对于小白特别不友好,按步骤操作肯定是不行的,因为文章中只举了很小很小的一个例子,感觉更像demo.而小白可能只是临时接受部署任务,按部就班的操作是会出现很多错误的.现在就来排排坑.(建议先看一遍再动手部署) 一.Dockerfile

vue项目部署上线

前言 今天把自己写的demo登录写完了,就想着试着走一下部署上线的流程.参考了很多的文档,终于成功进行了部署.在这里将服务器的搭建和vue项目的 部署上线进行整理(都是基础的知识,希望对大家有帮助.对我帮助是很大的) 2.流程 1.服务器搭建 这里我用的是腾讯云的服务器.买了一个域名.没有备案的域名也可以使用.买完服务器进行域名解析. 点击添加解析,按照下面这样填写就行 马赛克是你的外网ip 可以根据你需要的进行修改,我这只是最基本的绑定.其他请自行百度. 3.添加ssh密钥 第一步添加密钥,会

【G】开源的分布式部署解决方案(二) - 好项目是从烂项目基础上重构出来的

G.系列导航 [G]开源的分布式部署解决方案 - 预告篇 [G]开源的分布式部署解决方案(一) - 开篇 [G]开源的分布式部署解决方案(二) - 好项目是从烂项目基础上重构出来的 分析目前项目结构 眼前出现这么一坨坨的文件夹,相信很多人已经看不下去了.是的,首先就是要把它给做掉. 按照这个项目文件夹的命名意图,大概可以划分如下: 1.Business:业务代码 2.Data:数据访问 3.Helpers:辅助类(通用类库之类的) 4.Models:各种模型(包括视图模型) 5.theme:皮肤

webpack构建vue项目(配置篇)

最近公司要求用vue重构项目,还涉及到模块化开发,于是乎,我专门花了几天的时间研究了一下webpack这个目前来看比较热门的模块加载兼打包工具,发现上手并不是很容易,现将总结的一些有关配置的心得分享出来,欢迎大神来拍砖... 一.新建一个项目目录,cd /d 定位进去,然后输入npm init,会提示你填写一些项目的信息,一直回车默认就好了,或者直接执行npm init -y 直接跳过,这样就在项目目录下生成了一个package.json文件. 二.接下来就是通过npm安装项目依赖项,命令行输入

热烈庆祝《Vue.js 实战教程 V2.x(一)基础篇》上线了!

课程简介 课程地址:https://ke.qq.com/course/432961 机构名称:大华软件学院 授课讲师:大强老师 课程名称:Vue.js 实战教程 V2.x(一)基础篇 课程简介:包括前端发展史.Vue.js简介.第一个Vue.js程序.安装环境和Vue.Vue实例.模板语法.计算属性和侦听器.Class与Style绑定.条件渲染.列表渲染.事件处理.表单输入绑定.组件基础等等. 适合人群: 1.初出茅庐,想学习前端开发的同学: 2.没用过Vue.js,想学习更多框架的同学: 3.