如何命令行结束react程序_想要成为前端Star 吗?一首歌时间将React / Vue 应用Docker 化...

前言

以前一直有疑问困扰着我:人人都在吹的Docker容器化,与前端有何关系?

然而在近两年的编程生涯,在每一次产品迭代中,渐渐体会到了容器化其魅力所在。

应用部署从刀耕火种,到DevOps崛起,原来不止前端在迅捷发展。接下来,我将用一首歌的时间,带大家真实的体验一番Docker容器化。84d956b3892a5056043c0102e518885c.png

1. 朴素的Dockerfile

首先准备一个有标准运行指令的Web应用,用脚手架creat-react-appVue CLI等生成的即可。

以下的Dockerfile不参杂其它依赖,争取做到都能看懂:

# 指定Node版本FROM node:12.18.3# 容器中应用程序的路径。将Web目录作为工作目录WORKDIR /web# 将package.json 复制到 Docker 环境COPY ./package.json /web/package.json# 安装依赖RUN yarn# 将代码复制到Docker容器中的Web目录COPY . /web/# 暴露容器内部访问端口,根据项目变动EXPOSE 8080## 如果是Vue CLi,则换成 yarn serveCMD ["npm", "start"]

是的,开发环境在Docker 部署,关键配置就那么几行。

ffc442bfe7c6b5b5d064c76094bfe12b.png

此外,还需要添加一个.dockerignore文件,加快构建过程的速度

node_modules/**/*build/**/*.DS_Store

2. 为应用构建Docker镜像

首先确认你的Dcoker 正在运行。bc3e9ef399bc6a36bca9f4dcff275489.png

运行以下命令来构建Docker映像。react-docker 可以替换为你要为镜像命名的任何值。

docker build -t react-docker .

其中-t 为打标签的意思,执行完后将会看到:

bedf0090be503c4951a9baa3638812c7.png
Successfully built 137c69857dd0Successfully tagged react-docker:latest

您的镜像已经嗷嗷待发。

3. 运行Docker + React/Vue

现在,使用以下docker run命令, 通过Docker在端口3000上运行React应用。

docker run -p 3000:3000 react-docker

其中:前一个 3000 对应本机http://localhost:3000/,第二个 3000 则是Docker容器端口。

5ddfe984343cdb01064f485223d4eb9f.png

可以通过Dcoker ps查看容器信息ee8ff481dbf439f3eddc6ea411f6879d.png

DockerDashboard中也可以看到:

91d4bb245f096b7a01445bc3763477d3.png

此时打开http://localhost:3000/就会看到熟悉又亲切的画面

5ef8a9a9db601323be6d2667dc033462.png

到这里,你的一首歌的时间之Docker之旅就结束了。接下来的将是更标准化的流程,劝退劝退!

4. Docker Compose 标准化流程

docker-compose.yml文件添加到项目根目录:

version: '3.7'services:  sample:    container_name: sample    build:      context: .      dockerfile: Dockerfile    volumes:      - '.:/app'      - '/app/node_modules'    ports:      - 3000:3000    environment:      - CHOKIDAR_USEPOLLING=true

有了该文件,就不需要分步执行了,直接:

docker-compose up -d --build
9e9eb786522dc8069a0c44e4131bedcc.png

就能看到一样构建了:

54348e5d5e68bd3e7d5a74831047367a.png

5. 生产环境下的Dockerfile

生产环境下需要nginx配置,在根目录先创建nginx.config

server {    listen       ${PORT:-80};    server_name  _;    root /usr/share/nginx/html;    index index.html;    location / {        try_files $$uri /index.html;    }}

让我们创建一个单独的Dockerfile,用于生产环境,称为Dockerfile.prod

FROM node:12.18.3 AS builderWORKDIR /appENV PATH /app/node_modules/.bin:$PATHCOPY package.json ./COPY package-lock.json ./# 前端项目构建命令 — npm ci 或 npm install# http://www.gaoxiukun.com/wp/archives/509RUN npm ci# React 应用需要react-scriptRUN npm install react-scripts@3.4.1 -gCOPY . ./RUN npm run build# 安装nginxFROM nginx:1.17-alpineRUN apk --no-cache add curlRUN curl -L https://github.com/a8m/envsubst/releases/download/v1.1.0/envsubst-`uname -s`-`uname -m` -o envsubst && \    chmod +x envsubst && \    mv envsubst /usr/local/binCOPY ./nginx.config /etc/nginx/nginx.templateCMD ["/bin/sh", "-c", "envsubst < /etc/nginx/nginx.template > /etc/nginx/conf.d/default.conf && nginx -g 'daemon off;'"]COPY --from=builder /app/build /usr/share/nginx/html

因为Dockerfile.prod不是默认的执行文件,所以需要构建并标记:

docker build -f Dockerfile.prod -t sample:prod .
3d2ea696ce100ed81b23320f1e2451ca.png

接下来执行docker run

docker run -it --rm -p 3000:80 sample:prod
  • -i: 以交互模式运行容器。
  • -t: 为容器重新分配一个伪输入终端,通常与 -i 同时使用。
  • --rm:在容器退出时自动清理容器内部的文件系统,不懂可忽略
  • -p: 指定端口。

成功运行:7e096e916775c50af73197144f25b2fa.png

在浏览器中导航到http://localhost:3000 以查看该应用程序。

接下来使用新的Docker Compose文件以及docker-compose.prod.yml进行测试:

version: '3.7'services:  sample-prod:    container_name: sample-prod    build:      context: .      dockerfile: Dockerfile.prod    ports:      - '3000:80'

启动容器:

docker-compose -f docker-compose.prod.yml up -d --build

在浏览器中再次进行校验。

555f74fa83b42492f5e23eb01ea7669a.png

❤️ 结语

在以往,我对Docker容器化的概念,仅停留在了解。而真正实操中,也是被一群指令,配置给吓到劝退。

本文弱化了命令行参数,希望能让广大萌新们能先看懂,再去演练一番,举一反三,不再怕Docker,然后再去学习k8s相关。

e11ac27ff97bb19cadd4c1238214eb57.png

Docker 在接下来的几年里,会逐渐成为开发的标配,希望大家能放下对运维领域的偏见,多多学习这些行业内的新标准与概念。

如果你觉得这篇内容对你挺有启发,我想邀请你帮我三个小忙:

  1. 点赞,让更多的人也能看到这篇内容(收藏不点赞,都是耍流氓 -_-)
  2. 关注公众号「前端劝退师」,不定期分享原创知识。
  3. 也看看其它文章
9fbcad28701deb43c16726773e006d54.png

劝退师个人微信:huab119,或公众号留言,我加你们

也可以来我的GitHub博客里拿所有文章的源文件:

前端劝退指南:https://github.com/roger-hiro/BlogFN 一起玩耍呀。~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/507365.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

隐私计算 2.2 Shamir秘密共享方案

1 简介 作者&#xff1a;Shamir时间&#xff1a;1979年理念&#xff1a;基于多项式插值算法 2 具体实现 I 秘密分割算法 &#xff08;1&#xff09;选择一个随机素数 ppp&#xff0c;并产生一个随机的 t−1t-1t−1 次多项式&#xff1b; f(x)at−1xt−1⋯a1xa0modpf(x)a_{t-…

vue理由设置_在你的下一个Web应用中使用Vue.js的三个理由

Vue.js是那么地易上手&#xff0c;它在提供了大量开箱即用的功能的同时也提供了良好的性能。请继续阅读以下事例及代码片段以便更加了解Vue.js。选择一个JavaScript框架真是太难了——因为有太多的框架可以供我们使用&#xff0c;并且它们之间的差距并不是很明显。如果你认为生…

什么是spark的惰性计算?有什么优势?_spark——spark中常说RDD,究竟RDD是什么?

本文始发于个人公众号&#xff1a;TechFlow&#xff0c;原创不易&#xff0c;求个关注今天是spark专题第二篇文章&#xff0c;我们来看spark非常重要的一个概念——RDD。在上一讲当中我们在本地安装好了spark&#xff0c;虽然我们只有local一个集群&#xff0c;但是仍然不妨碍我…

隐私计算 2.3 基于中国剩余定理的秘密共享方案

1 简介 作者&#xff1a;Asmuth和Bloom&#xff1b;时间&#xff1a;1983年&#xff1b;理念&#xff1a;基于中国剩余定理&#xff08;CRT&#xff09;。 2 具体实现 I 秘密分割算法 &#xff08;1&#xff09;选择nnn个整数d1,d2,…,dnd_1, d_2, \dots, d_nd1​,d2​,…,d…

服务器基线加固脚本_Linux 基线检查,安全加固脚本

#!/bin/bash# Author:韩伟# Date: 2019-12-29# 实现对用户密码策略的设定&#xff0c;如密码最长有效期等datedate %Y-%m-%dread -p "是否设置密码策略[y/n]:" Yif [ "$Y" "y" ];thenread -p "设置密码最多可多少天不修改&#xff1a;&quo…

前端websocket获取数据后需要存本地吗_是什么让我放弃了Restful API?了解清楚后我全面拥抱GraphQL!...

背景REST作为一种现代网络应用非常流行的软件架构风格&#xff0c;自从Roy Fielding博士在2000年他的博士论文中提出来到现在已经有了20年的历史。它的简单易用性&#xff0c;可扩展性&#xff0c;伸缩性受到广大Web开发者的喜爱。REST 的 API 配合JSON格式的数据交换&#xff…

隐私计算 2.4 Brickell秘密共享方案

1 简介 作者&#xff1a;Brickell&#xff1b;时间&#xff1a;1989年&#xff1b;理念&#xff1a;Shamir秘密共享方案的推广&#xff0c;由一维方程转向多维向量。 2 具体实现 I 秘密分割算法 &#xff08;1&#xff09;首先确定可以掌握钥匙的人数nnn&#xff0c;以及模数…

fabric shim安装合约_智能合约简介_智能合约开发_Hyperledger Fabric_开发指南_区块链服务 BaaS - 阿里云...

概述在 Hyperledger Fabric 中&#xff0c;链码(Chaincode)又称为智能合约(下文中我们统一称为链码)&#xff0c;是用Go&#xff0c;node.js或Java编写的程序&#xff0c;主要用于操作账本上的数据。用户的应用程序通过链码与 Fabric 账本数据进行交互&#xff0c;交互关系如下…

子集和问题 算法_LeetCode刷题实战90:子集 II

算法的重要性&#xff0c;我就不多说了吧&#xff0c;想去大厂&#xff0c;就必须要经过基础知识和业务逻辑面试算法面试。所以&#xff0c;为了提高大家的算法能力&#xff0c;这个公众号后续每天带大家做一道算法题&#xff0c;题目就从LeetCode上面选 &#xff01;今天和大家…

隐私计算 2.5 Blakley秘密共享方案

1 简介 作者&#xff1a;Blakley&#xff1b;时间&#xff1a;1979年&#xff1b;理念&#xff1a;基于高斯消元法。 2 具体实现 I 秘密分割算法 II 秘密重构算法 3 实例 设秘密S(3,10,5)S (3, 10, 5)S(3,10,5)&#xff0c;n5n 5n5, t3t 3t3。 I 秘密分割 &#xff0…

webconfig的解决方案怎么添加_解决在Web.config或App.config中添加自定义配置的方法详解...

解决在Web.config或App.config中添加自定义配置的方法详解本篇文章是对在Web.config或App.config中添加自定义配置的方法进行了详细的分析介绍&#xff0c;需要的朋友参考下.Net中的System.Configuration命名空间为我们在web.config或者app.config中自定义配置提供了完美的支持…

conda如何升级pytorch_Google Cloud TPUs 支持 Pytorch 框架啦!

在2019年PyTorch开发者大会上&#xff0c;Facebook&#xff0c;Google和Salesforce Research联合宣布启动PyTorch-TPU项目。项目的目标是在保持PyTorch的灵活性的同时让社区尽可能容易地利用云TPU提供的高性能计算。团队创建了PyTorch/XLA这个repo&#xff0c;它可以让使PyTorc…

隐私计算 2.6 秘密共享的同态特性

1 秘密共享的同态性 秘密共享的同态性&#xff1a;秘密份额的组合等价于组合的秘密共享份额。 假设A、B两方分别有秘密SAS^ASA和SBS^BSB&#xff1b;他们的值被随机拆分为S1A,…,SnAS_1^A, \dots, S_n^AS1A​,…,SnA​和S1B,…,SnBS_1^B, \dots, S_n^BS1B​,…,SnB​&#xff…

chromiumwebbrowser 使用_用Tchromium替换webbrowser

用惯了EmbeddedWB,不想换&#xff0c;但是IE内核一直存在内存泄漏问题&#xff0c;没办法&#xff0c;只有寻找替代品了。要把用习惯的EmbeddedWB换成完全不一样的TChromium&#xff0c;有点挑战&#xff0c;特别是在资料不多&#xff0c;英语没过三级的情况下。未来趋势是这样…

python是在linux系统下运行的吗_Linux系统下python代码运行shell命令的方法

方法一&#xff1a;os.popen #!/usr/bin/python#-*- coding: UTF-8 -*- importos, sys#使用 mkdir 命令 a lsb os.popen(a,w,1)print b 方法二&#xff1a;os.system #!/usr/bin/python#-*- coding: UTF-8 -*- importos, sys arg0"121.429015"arg1"31.245255&q…

隐私计算 2.7 Shamir门限秘密共享的加法同态性

1 Shamir门限秘密共享的加法同态性 Shamir门限秘密共享方案具有(,)(, )(,)同态的性质&#xff0c;即&#xff1a; SASBFI(S1A,…,StA)FI(S1B,…,StB)FI(S1AS1B,…,StAStB)\begin{array}{l} S^A S^B && F_I(S_1^A, \dots, S_t^A) F_I(S_1^B, \dots, S_t^B)\\ &&a…

pageable设置size_分页工具一Pageable与Page

import org.springframework.data.domain.Pageable;import org.springframework.data.domain.Page;1.Pageable概述Page findByAge(int age, Pageable pageable);Pageable 是Spring Data库中定义的一个接口&#xff0c;用于构造翻页查询&#xff0c;是所有分页相关信息的一个抽象…

二阶龙格库塔公式推导_带你走进最美数学公式

同学们&#xff0c;我们先来跟老师欣赏一下数学中最优美的式子吧&#xff1f;是什么魔力让以上几个似乎毫不相干的数学中最特殊的数字能如此优美的写在同一个式子呢&#xff1f;是欧拉&#xff0c;是数学。0和1——老师就不用介绍啦&#xff0c;e是自然常数(natural constant)&…

python如何做辅助线_角平分线如何做辅助线,学霸总结了4种模型,轻松应付中考...

角平分线2大辅助线思路4种基本模型对称形思路包括3种基本模型&#xff0c;思想都是为了构造全等三角形&#xff0c;然后转换图像中的角度和线段关系。平行线思路则是为了构造一个等腰三角形&#xff0c;通常是为了转移线段关系。双角平分线夹角公式记住这个结论&#xff0c;在选…

隐私计算 2.8 Shamir门限秘密共享的乘法同态性

1 Shamir门限秘密共享的乘法同态性 Shamir门限秘密共享方案具有(,)(\times, \times)(,)同态的性质&#xff0c;即&#xff1a; SASBFI(S1A,…,StA)FI(S1B,…,StB)FI(S1A⊗S1B,…,StA⊗StB)\begin{array}{l} S^A \times S^B && F_I(S_1^A, \dots, S_t^A) \times F_I(S_…