docker安装nginx并部署前端项目的全过程
目录
- 1.简介
- 2.操作
- 3. 总结
1.简介
本文主要介绍如何使用docker安装nginx，以及如何将前端打包好的vue项目部署到nginx上。
2.操作
（1）拉取nginx镜像：
docker pull nginx
（2）咱们先把docker镜像跑起来：
docker run --name myNginx -p 80:80 -v /home/nginx/dist:/usr/share/nginx/html -d nginx ## --name：容器名字 ## -d: 要启动的镜像的名字 ## -v: /home/nginx/dist 这是宿主机(服务器)中的目录映射到nignx容器中的/usr/share/nginx/html中;
其实最让人费解的就是-v这个东西，其实就是docker的文件映射。我自己的理解就是将宿主机与nginx镜像中的目录映射关联起来，这样的效果就是nginx镜像中的目录下的文件发生了什么变化，与之映射的宿主机的目录也会随之变化，同理，当宿主机中的映射目录下的文件发生变化，与之对应的nginx镜像中的映射目录也会有同样的变化，二者的内容是保持一样了，这样的好处就是我们以后想改某个容器的配置文件的时候，不用再进入到容器内部去改了，咱直接在宿主机上改即可。
（3）上一步启动容器的目的是想把容器中的一些目录先拷贝到宿主中，上一个启动命令并不是终极版的启动命令，咱们还需要把nginx容器中的配置文件所在的目录下的文件内容拷贝到宿主机中，让这两个目录的原始内容先保持一致，废话不多说，请看命令：
docker cp 容器id:/etc/nginx /home/etc
咱们把nginx容器中的/etc/nginx下的内容拷贝到宿主机的/home/etc文件中，如果同学你的/home里面没有etc这个文件夹，可以提前建一个再来拷贝。
（4）好好好，这个nginx容器我已经利用完了，现在是时候抛弃它了，因为咱们的终极版nginx容器是不需要它了，运行下面的命令来把这个nginx容器干掉(我真无情~哈哈)：
docker rm 容器id
（5）做完上面的无情第四步之后，接下来是最重要的一步，我们要启动nginx镜像。
docker run --name myNginx -p 80:80 -v /home/nginx/dist:/usr/share/nginx/html -v /home/etc/nginx:/etc/nginx -d 镜像的id或者名字
解释：启动镜像的时候，最重要的就是做好文件映射，这里有两个地方我们需要映射的，一个是nginx镜像中的：/usr/share/nginx/html，这个目录是用于放具体的vue前端项目的嘛，我们就用将它映射到宿主机(你的服务器)中的这个目录: /home/nginx/dist；还有一个是nginx镜像中的： /etc/nginx，这个目录里面有nginx的配置文件，咱们映射到宿主机：/home/etc/nginx里面。映射了这个目录以后，修改nginx的配置文件就可以不用再到容器里面了，可以直接到宿主机的/home/etc/nginx里面去修改nginx的配置文件。
（6）咱们继续看看怎么到宿主机上修改nginx的配置文件：
cd /home/etc/nginx/conf.d
到这个目录下，我们可以看到一个: default.conf，是的，就是它，这个文件就是配置nginx的关键文件。
然后就是咱们build的前端项目只要上传到宿主机中的： /home/nginx/dist里面即可，就像下面这样。
最后咱们可以重启一下nginx容器，看看有没有生效。访问地址是：你的ip地址:80
3. 总结
废话很多，最重要的就是要想提醒同学们要注意docker的文件映射，尤其docker的启动命令中，不要看到很长就懒得仔细看，一股脑就复制到服务器上执行。好了，以上就是我的分享，如果有问题咱们评论区见~
到此这篇关于docker安装nginx并部署前端项目的文章就介绍到这了,更多相关docker安装nginx部署项目内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
Nginx下SSL证书安装部署步骤介绍
目录 问题描述: 安装步骤 1.准备工作 2.远程连接服务器 3.拷贝证书和私钥文件 4.编辑 Nginx 根目录下的 conf/nginx.conf 文件 5.在 Nginx 根目录下,通过执行以下命令验证配置文件问题 6.重启 Nginx,访问网站 问题描述: 小编遇到https协议过期了,于是重新申请,在Nginx服务器部署SSL证书 安装步骤 1.准备工作 在 SSL 证书管理控制台 中下载并解压缩 cloud.tencent.com 证书文件包到本地目录. 解压缩后,可获得相关类型的证
-
windows安装nginx部署步骤图解(反向代理与负载均衡)
一.下载安装Nginx(本文环境为windows xp 32bit环境) 解压nginx-1.0.11.zip,进入nginx-1.0.11,在命令行中执行命令让Nginx启动.具体操作如下图: 测试是否安装成功,输入地址:http://localhost:8090 浏览器显示结果如下图: OK,Nginx部署成功了. 二.关于Nginx的反向代理配置. 反向代理(Reverse Proxy)方式是指以代理服务器来接受internet上的连接请求,然后将请求转发给内部网络上的服务器,并将从服务器
-
基于nginx的静态网页部署的实现
背景: 一序列的html网页需要部署 基于nginx的部署: 本文采用的基于openresty的nginx 配置. 简单地配置 Nginx 的配置文件,以便在启动 Nginx 时去启用这些配置即可实现对于编写好的html网页的点击跳转访问.而本文的重点也是于此. 配置方式1: Nginx 的配置系统由一个主配置文件和其他一些辅助的配置文件构成.这些配置文件均是纯文本文件,一般地,我们只需要配置主配置文件就行了./usr/local/openresty/nginx/conf 下的配置文件修改如下:
-
Nginx一键安装部署静态网页的过程详解
目录 Nginx安装和部署 1.输入指令,下载相关的依赖包 2.在你的linux服务器上创建目录:install 3.进入刚刚创建的目录: 4.下载并解压安装包 5.进入刚刚解压好的目录: 6.分别执行下面命令 7.编辑启动端口(图片的端口是经过修改的,默认是80端口) 8.启动nginx 9.简单的项目部署(最简单的) 10.网页部署成功 Nginx安装和部署 1.输入指令,下载相关的依赖包 yum -y install gcc zlib zlib-devel pcre-devel opens
-
Nginx Linux安装部署详细教程
一.Nginx简介 Nginx是一个web服务器也可以用来做负载均衡及反向代理使用,目前使用最多的就是负载均衡,具体简介我就不介绍了百度一下有很多,下面直接进入安装步骤 二.Nginx安装 1.下载Nginx及相关组件 Linux系统是Centos 6.5 64位,我直接切换到root用户下安装 进入用户目录下载程序 下载相关组件 [root@localhost src]# wget http://nginx.org/download/nginx-1.10.2.tar.gz 省略安装内容...
-
docker安装nginx并部署前端项目的全过程
目录 1.简介 2.操作 3. 总结 1.简介 本文主要介绍如何使用docker安装nginx,以及如何将前端打包好的vue项目部署到nginx上. 2.操作 (1)拉取nginx镜像: docker pull nginx (2)咱们先把docker镜像跑起来: docker run --name myNginx -p 80:80 -v /home/nginx/dist:/usr/share/nginx/html -d nginx ## --name:容器名字 ## -d: 要启动的镜像的名字
-
docker安装tomcat并部署Springboot项目war包的方法
说来也简单,直接上教程吧,博主 1.首先在启动docker service docker start 2.拉取tomcat镜像. docker pull tomcat:8-jdk8 如果不加后面的8-jdk8 标签的话,会默认拉取latest,也就是最新的官方版本 3.安装完成后,做作容器,并启动tomcat docker run --name tomcat -p 8080:8080 如果正常安装后访问ip+端口出现404情况,进入tomcat目录,把原有webapps目录删除,并把webap
-
苹果M1芯片安装nginx 并且部署vue项目步骤详解
brew安装nginx 苹果mac安装使用 brew 安装,如果brew没有安装的话,请到搜索其他地方. 执行命令 第一步当然是更新我们的brew库,可以认为这个玩意就是个软件仓库,类似于安卓市场,苹果appStore brew update 第二步直接查找我们的brew库中有没有nginx这个玩意儿 brew search nginx 如果出现,证明库中已经有了,直接进行安装命令 brew install nginx 安装完 只要没有报错,你的nginx就是已经安装成功了... mac环境下的
-
docker+Nginx部署前端项目的详细过程记录
目录 相关配置安装 创建配置文件 项目打包与部署 一个相关报错: 总结 相关配置安装 安装Docker yum install docker 启动服务 start docker systemctl start docker Docker中拉取nginx镜像 docker pull nginx 创建配置文件 我们需要在根目录下创建Dockerfile文件和default.conf文件. 其中default.conf文件的名称是什么无所谓,只要在配置文件中注意使用相同名称即可. Dokcerfile
-
一篇文章快速掌握Nginx部署前端项目(Nginx安装配置及部署都非常详细!)
目录 前言: Nginx的三个作用: 负载均衡: 反向代理: 动静分离: Nginx的下载安装(Linux环境下) Nginx的使用 三.部署前端项目 总结 前言: 之前在Linux系统中部署了后端项目,今天继续来给大家分享如何部署前端项目. 涉及到了Nginx的简单介绍以及Nginx如何安装及配置并且能够部署前端项目 Nginx是一个轻量级的反向代理web服务器,在当今应用地非常广泛,特别是前后端分离的情况下. Nginx的三个作用: 负载均衡: 当我们的单个项目访问量达到了单个tomcat无
-
docker安装nginx容器的方法
目录 1.自定义网络相关命令 2.nginx是什么 Nginx+tomcat是目前主流的java web架构 3.安装nginx 4.docker实战之通过nginx镜像来部署SPA项目 5.nginx.conf讲解 1.自定义网络相关命令 1.创建自定义网络 docker network create --driver bridge --subnet 192.168.0.1/16 --gateway 192.168.0.1 mynet 参数说明 --driv
-
使用Docker安装Nginx并配置端口转发问题及解决方法
使用docker安装并运行nginx命令: docker run --name=nginx -p 80:80 -d docker.io/nginx 使用命令: docker exec -it nginx /bin/bash 进入容器可查看到几个重要的文件 配置文件:nginx.conf 在 /etc/nginx/nginx.conf 日志文件: /var/log/nginx/access.log /var/log/nginx/error.log 使用cat命令打开nginx.conf root@
-
centos+nginx+uwsgi部署django项目上线
目录 Python安装 django相关库的安装 nginx安装&配置(处理静态请求和代理动态请求到uwsgi) uwsgi安装&配置 标题关闭setting.py的DEBUG模式 上传完整django项目文件到服务器sftp ftp lrzsz都可以上传文件到服务器,看自己我django项目叫yunwei,主要app是rabc和web,整个项目放/opt/下如下: [root@test-code opt]# ls django_virt nginx redis redis-6.2.6 y
-
在nginx上部署vue项目(history模式)的方法
vue-router 默认是hash模式,使用url的hash来模拟一个完整的url,当url改变的时候,页面不会重新加载.但是如果我们不想hash这种以#号结尾的路径时候的话,我们可以使用路由的history的模式.比如如下网址: 使用hash模式的话,那么访问变成 http://localhost:8080/bank/page/count/#/ 这样的访问,如果路由使用 history的话,那么访问的路径变成 如下: http://localhost:8080/bank/page/count
-
Docker安装Nginx问题及错误分析
问题: 在Docker中装Nginx时遇到了如下错误: docker: Error response from daemon: OCI runtime create failed: container_linux.go:345: starting container process caused "process_linux.go:424: container init caused "rootfs_linux.go:58: mounting \"/docker/nginx/