Docker利用Nginx部署前端项目_docker nginx部署前端项目-程序员宅基地

技术标签: nginx  前端  docker  

        今天给大家分享的是Docker利用Nginx部署Vue等前端页面项目;其实是我工作刚好用到,顺便分享给大家O(∩_∩)O,那么话不多说直接开始。

一:准备文件

        我们先将前端项目打包好,放到此文件夹下,例如我这样:

        之后编写Dockerfile文件和nginx.conf.template文件,文件内容如下:

Dockerfile:

FROM nginx:latest
 
#将配置文件复制到Nginx指定文件夹下
COPY ./dist /dist
COPY ./nginx.conf.template /
#构建自定义环境变量
CMD envsubst < /nginx.conf.template > /etc/nginx/nginx.conf \
	&& cat /etc/nginx/nginx.conf \
	&& nginx -g 'daemon off;'

nginx.conf.template:

user nginx;

worker_processes  1;
 
events {
    worker_connections  1024;
}
 
 
http {
    include       mime.types;
    default_type  application/octet-stream;
 
    sendfile        on;
	#超时时间
    keepalive_timeout  65;
 
    server {
		#监听端口
        listen       80;
		#服务名,可通过此名称访问页面
        server_name  localhost;
 
        location / {
            root   /dist;
			#设置访问端口首页
            index  index.html index.htm;
        }
		#设置报错跳转页面,不需要可注释或删掉
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

温馨提醒:Dockerfile左侧的dist文件夹就是你前端项目存放的文件夹、nginx.conf.template文件中设置了首页跳转index等,使用时记得改成自己所需的;重要的位置都写注释了,可以自行更改为自己需要的。

        最后将三个编写好的文件放入同一文件夹下(建议新建一个文件夹),注意Dockerfile和nginx.conf.template都是没有后缀的。

        注:如果是linux系统,先找个位置创建文件夹,然后利用可视化窗口将三个文件全部拉到刚刚创建的文件夹下即可。如果你的工具不支持可视化窗口,可以去我的这篇文章学习或下载其中任意一个工具即可,linux上传命令我就不写了(●'◡'●)。

        准备工作完成后就会得到像我这样的三个文件。

二:开始部署 

        1.首先先CD进入你存放文件的文件夹下,我这里是利用Windows的Docker desktop做演示。

         

                 如果你是linux系统,直接 cd 文件夹路径,如果已进入不必重复操作。

        2.执行Dockerfile文件,构建docker镜像,注意后面有个点必须有。若未安装Nginx最新版,此过程会稍慢一些,可提前下载Nginx,命令为:docker pull nginx

docker build -f Dockerfile2 -t my-frontend:v1.0 .

                --Dockerfile2:就是上面编写的Dockerfile文件,以你自己的为准

                --my-frontend:v1.0:左边为构建的镜像名,v1.0为tag标签,也可理解为版本号

        3.根据上面的镜像运行容器

docker run -d --name nginx01 -p 3000:80 my-frontend:v1.0

                --name:容器名

                --p:端口号,左侧为外网访问端口,右侧为内部映射端口,与nginx.conf.template的监听端口默认80一样即可。

                --my-frontend:v1.0:镜像名:tag,不携带tag默认为latest

        4.执行结束后可利用 docker ps 来查看刚刚的容器是否启动成功

                像这样便是启动成功了:

         5.打开浏览器访问

                输入localhost或你的ip+端口号即可访问前端项目首页,示例:

                这是我自己写的一个很low的前端页面

到此为止,你的项目就成功部署到Docker中的Nginx中了,撒花*★,°*:.☆( ̄▽ ̄)/$:*.°★* 。

以上就是本次分享的全部内容了,感谢你的阅读;喜欢这篇文章或这篇文章帮到了你,一定要记得点赞、收藏哦O(∩_∩)O

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/guo0208/article/details/127550442

智能推荐

python tornado中cookie_secret的生成方法-程序员宅基地

文章浏览阅读5.3k次。python tornado中cookie_secret的生成方法 from base64 import b64encode from uuid import uuid4 b64encode(uuid4().bytes + uuid4().bytes) 得到: 如 urnqS8z4RB6CENU+jEPvLqjXbinxQEsJlTwdp/ehx9Y=..._cookie_secret

sql服务启动不了(解决方法之一)_sql服务器无法启动-程序员宅基地

文章浏览阅读5.2k次。如果尝试了网上的各种方案,还是解决不了自启问题,可以尝试以下我的解决方案,在我自己的电脑上可行一开始我也在网上找了很多关于自动启动sql服务,可是一直都没有什么变化,也还是不能够自动启动,后面我无意之中发现了一种方法,可以解决开机自动启动sql服务首先,我们还是需要找到sql服务,并设置成自动或自动延时启动然后再找到下边这个界面点击更改当前不可用的设置,将启用快速启动取消掉即可,注:原本启用快速启动默认是选择的,我们只需要把这个选项取消就可以了,但是取消掉这个后,电脑启动时会延长_sql服务器无法启动

JavaWeb之相关点_java tiko爬虫-程序员宅基地

文章浏览阅读68次。_java tiko爬虫

关于selenium实现滑块验证-程序员宅基地

文章浏览阅读202次。python2.7+selenium2实现淘宝滑块自动认证参考链接:https://blog.csdn.net/ldg513783697/article/details/51583641selenium、python模拟登陆淘宝参考链接:https://blog.csdn.net/mighty13/article/details/78035088..._selesnuim滑块验证

第六篇:CamX添加自定义vendortag_camx 添加vendortag-程序员宅基地

文章浏览阅读29次。注:本文章所有权归:小驰成长圈,禁止转载宣传!_camx 添加vendortag

随便推点

人物志:一个平庸程序员的想法_程序员人物侧记-程序员宅基地

文章浏览阅读649次。前天晚上,老婆和我偎在床上说悄悄话,大致的意思是所有她的同学都有房子了,有些还当上了管理人员,并带着少许调侃说我以后也就这样了,1年10多万,失业就会掉头发。 我今年28,一个C++/Java程序员,跟大多数人一样,天资平平,虽然爱学习,但没有上一个好大学,工作这么几年也没有混上一个管理人员,有时候在自己看来,稍稍有些可悲。因为官本位的残留+农耕文化,在中国搞技术历来就是一个吃力不讨好的事情。搞技_程序员人物侧记

P1025 [NOIP2001 提高组] 数的划分-程序员宅基地

文章浏览阅读93次。有两种方法 :1.DP(也可以说是递推法):2:DFS对于递推法:我们用二维数组M[i][j] 来表示 i个数分成j份有多少次分法,这样我们递推下去,M[n][k]就是所求结果递推关系: M[i][j]=M[i-1][j-1]+M[i-j][j];其实就是 对于每次i所加的1 让他去哪,第一种方法,让这个1单独为1组,就是M[i-1][j-1];还有就是让 每一组都加上1来改变分组情况 就是M[i-j][j];#include<bits/stdc++.h&..._[noip2001 提高组] 数的划分

正在做 ESP32 , STM32 , 树莓派 RaspberryPi 的创客工具-程序员宅基地

文章浏览阅读301次。先随便写写一些思路, 以后再整理.这段时间笔者做了一些硬件开发, 领悟了一些事情.1 - 在常规创客的角度上, 硬件开发所需的知识面比较广, 非常广, 但不算太深.2 - 发现硬件开发由于其特殊环境的原因, 开发难度很大, 难度绝大部分来源于很麻烦, 效率很低.一般的开发者, 如果他们入门就直接学硬件, 他们是感觉不到这问题的. 没有对..._esp32如何当做stm32

vm虚拟机扩容_vm虚拟机扩容gui版软件-程序员宅基地

文章浏览阅读184次。想要给Linux虚拟机扩容,可是忘了之前用的方法,重新搜索了一下弄完后想不如记录下来,下次方便看 。软件:gparted1. sudo apt-get install gparted 安装gparted2.关机扩容3.打开gparted4.因为只有相邻的空间时没有被分配的才能扩展空间大小,所以我们先删除/dev/sda2,保存修改5.resize /dev/sda1/6..._vm虚拟机扩容gui版软件

input输入框只能输入整数_input 只能输入整数-程序员宅基地

文章浏览阅读2.4k次。input输入框只能输入整数_input 只能输入整数

【方案总览】全志方案选型总览与分析-持续更新_全志芯片选型-程序员宅基地

文章浏览阅读1.3w次,点赞15次,收藏64次。今天给大家聊一下全志方案的选型问题,全志在业内都称为万年A7,那么我们首先来看看改革开放30周年以来全志的一些主流芯片和个人对其的一些评价。全志A20: 在大吉出道的时候,A20刚好到了市场末期,大概在2014年左右吧,其实A20是一颗非常经典好用的2核心A7架构处理器,外围接口丰富,后来随着断货和代理商买断经销,其性价比也逐渐丢失,所以新开的案子建议不要再用A20了(还..._全志芯片选型

推荐文章

热门文章

相关标签