如何使用 Docker Compose 运行 OSS Wordle 克隆

        了解如何使用 Docker Compose 在五分钟内运行您自己的流行 Wordle 克隆实例。您将如何部署 Wordle?

        Wordle在 2021 年底发布后席卷了互联网。对于许多人来说,这仍然是一种早晨的仪式,与一杯咖啡和一天的开始完美搭配。作为一名 DevOps 工程师,除了琢磨Docker Compose文件然后沉迷于世界上最受欢迎的文字游戏之外,还有什么更好的方法来让你的头脑热起来呢?好吧,这个问题还没有定论,但本教程可以让您亲眼目睹。

为什么要编写 Docker Compose 文件?

        即使在具有单个 Dockerfile 的应用程序中,Docker Compose 文件也可能是有用的资产。使用 Dockerfile 通常需要冗长的build命令run,可以将其迁移到 Compose 文件中。这样,您就不必在每个新版本上复制和粘贴复杂的命令。相反,您的整个应用程序仅使用docker compose up. 当使用具有多个 Dockerfile 的应用程序时,这甚至更有价值:您不再需要单独构建和运行每个 Dockerfile。

        仍有无数应用程序已 Docker 化,但缺少 Compose 文件。在研究 Shipyard 的Docker Compose 社区聚焦系列时,我专门寻找使用 Compose 文件预打包的应用程序。这是为了强调使用 Docker Compose 可以做的一些很酷的事情,并展示 Compose 使应用程序开发变得多么容易。然而,当从头开始编写 Compose 文件时,很容易被容器网络、卷安装或正确的服务定义等方面吓倒。如果您是 Docker Compose 新手,则无需担心:您的第一个 Compose 文件的大部分内容将类似于您的 Dockerbuild和run命令。

使用 Compose 运行 Docker 化的 Wordle 克隆

GitHub 上有一个优秀的基于 React 的开源 Wordle 克隆。它有大约一百名贡献者,超过两千名用户已经分叉了它,以便在现代经典网页游戏中融入自己的风格。该存储库配备了 Dockerfile,允许您在本地计算机上的容器中运行它。

我们只需几分钟即可使用 Docker Compose 启动并运行它。

第 1 步:从 GitHub 分叉 React-Wordle

        首先将React-wordle 存储库从 GitHub 分叉到本地计算机。我基于main创建了一个名为add-docker-compose 的分支,这样我就可以进行多次提交,而不会弄乱主分支的 git 日志。
该存储库提供了以下 Docker 命令来构建和运行映像:

docker build -t reactle:dev -f docker/Dockerfile .
docker run -d -p 3000:3000 --name reactle-dev reactle:dev

我们将在下一步中使用这些命令来填充 Docker Compose 文件。

第 2 步:制作撰写文件

我们可以通过添加一个简单的单服务 Docker Compose 文件来部署此存储库。打开您选择的文本编辑器或 IDE,并docker-compose.yaml在分叉应用程序的根目录中创建一个文件。

首先,让我们设置 Compose 版本并基于单个 Dockerfile 定义一个服务,我们将其称为“reactle”

version: '3.8'
services:
    reactle: 

现在我们要从现有的 Dockerfile 进行构建。在此存储库中,它存储在docker目录中,因此我们将在 Compose 定义中包含此路径。由于此应用程序所需的所有文件都立即存储在根目录中,因此我们将构建上下文设置为应用程序的根目录。

我将容器的端口设置为3000,这是开发的标准。

version: '3.8'
services:
    reactle:
        build:
            context: .
            dockerfile: docker/Dockerfile
        ports:
            - '3000:3000'

该应用程序的资源位于 Dockerfile 指定的几个目录和文件中。我们可以在标签下列出它们的路径,以便容器可以访问它们。每个卷的格式为存储库 ( ) 内的路径,./src后跟冒号,然后是容器内相应的安装点 ( /app/src)。

version: '3.8'
services:
    reactle:
        build:
            context: .
            dockerfile: docker/Dockerfile
        ports:
            - '3000:3000'
        volumes:
            - './src:/app/src'
            - './public:/app/public'
            - './package-lock.json:/app/package-lock.json'
            - './package.json:/app/package.json'

如果我们想让这个应用程序与 Shipyard 兼容,我们只需要在 Compose 文件中再添加一个标签:

version: '3.8'
services:
    reactle:
        build:
            context: .
            dockerfile: docker/Dockerfile
        labels:
            shipyard.route: `/`
        ports:
            - '3000:3000'
        volumes:
            - './src:/app/src'
            - './public:/app/public'
            - './package-lock.json:/app/package-lock.json'
            - './package.json:/app/package.json'

现在我们已经有了:一个完整​​的 Docker Compose 文件,可以运行我们的 Wordle 克隆!我将使用这个新文件在react-wordle 存储库上打开一个PR。

第 3 步:运行我们的应用程序

现在我们已经完成了所有艰苦的工作,我们可以转到终端,导航到应用程序的根目录,然后运行命令docker compose up。Compose 将提供正在运行的应用程序的链接,我们可以从浏览器访问该链接。

运行 docker compose up 命令

…享受!

现在您可以利用 Docker Compose 的强大功能来管理功能齐全的 Wordle 克隆! 

        可能性是无限的 - 您可以根据自己的喜好自定义 Wordle,为 React-wordle 存储库做出贡献,在线托管您自己的 Wordle 变体,以及与朋友和同事分享您的创作链接。现在,您也许可以坐下来,放松一下,解决今天的 Wordle。

 

 

 

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

开源TTS+gtx1080+cuda11.7+conda+python3.9吊打百度TTS

一、简介 开源项目,文本提示的生成音频模型 https://github.com/suno-ai/bark Bark是由Suno创建的基于变换器的文本到音频模型。Bark可以生成极为逼真的多语种演讲以及其他音频 - 包括音乐、背景噪音和简单的声音效果。该模型还可以产生非言语沟通,如…

Linux存储学习笔记

相关文章 Linux 存储系列|请描述一下文件的 io 栈? - tcpisopen的文章 - 知乎 https://zhuanlan.zhihu.com/p/478443978 深入学习 Linux 操作系统的存储 IO 堆栈 - KaiwuDB的文章 - 知乎 https://zhuanlan.zhihu.com/p/636720297 linux存储栈概览 - st…

ssm+vue游戏攻略网站源码和论文

ssmvue游戏攻略网站源码和论文052 开发工具:idea 数据库mysql5.7 数据库链接工具:navcat,小海豚等 技术:ssm 一、主要内容和基本要求 游戏攻略网站分为管理员与用户两种角色。 管理员的功能包括登录,用户管理,游…

Centos7 安装Docker 详细多图版

配置要求 Docker CE(社区免费版) 支持 64 位版本 CentOS 7,并且要求内核版本不低于 3.10, CentOS 7 满足最低内核的要求,所以我们在CentOS 7安装Docker。 一、Centos安装Docker 1.1 卸载(可选&#xff0…

Datawhale AI夏令营 - 用户新增预测挑战赛 | 学习笔记

数据分析与可视化 为了拟合出更好的结果就要了解训练数据之间的相互关系,进行数据分析是必不可少的一步 导入必要的库 # 导入库 import pandas as pd import numpy as np import matplotlib.pyplot as plt import seaborn as sns pandas库是一个强大的分析结构化…

研发管理工具大揭秘!6款利器助你高效研发

"研发管理工具有哪些?6款研发管理利器分析Zoho Projects、Trello、Asana、Monday.com、Smartsheet、Jira。" 在如今的科技发展日新月异的时代,研发管理工具的重要性日益凸显。研发管理工具有助于提高研发效率,降低成本,…

无涯教程-PHP - preg_grep()函数

preg_grep() - 语法 array preg_grep ( string $pattern, array $input [, int $flags] ); 返回由与给定模式匹配的输入数组元素组成的数组。 如果将flag设置为PREG_GREP_INVERT,则此函数返回输入数组中与给定模式不匹配的元素。 preg_grep() - 返回值 返回使用…

Docker创建 LNMP 服务+Wordpress 网站平台

文章目录 Docker创建 LNMP 服务Wordpress 网站平台一.环境及准备工作1.项目环境2.服务器环境3.任务需求 二.Linux 系统基础镜像三.docker构建Nginx1.建立工作目录上传安装包2.编写 Dockerfile 脚本3.准备 nginx.conf 配置文件4.生成镜像5.创建自定义网络6.启动镜像容器7.验证 n…

网络安全(大厂)面试题

以下为网络安全各个方向涉及的面试题,星数越多代表问题出现的几率越大,祝各位都能找到满意的工作。 注:本套面试题,已整理成pdf文档,但内容还在持续更新中,因为无论如何都不可能覆盖所有的面试问题&#xf…

海思Hi3861L开发一-环境搭建

一、简介 之前的文章中有详细介绍了HarmonyOS的Hi3861开发,但是该开发是基于HarmonyOS来的。实际在项目开发中,可能不会用到HarmonyOS,用的还是原生的Hi3861。那这次就重新学习Hi3861L。 二、环境搭建 环境:Ubuntu18.04.5 关于Ubuntu的环境搭建,还是参考之前的文章,附上…

mysql------做主从复制,读写分离

1.为什么要做主从复制(主从复制的作用) 做数据的热备,作为后备数据库,主数据库服务器故障后,可切换到从数据库继续工作,避免数据丢失。 架构的扩展。业务量越来越大,I/O访问频率过高,单机无法满…

Java 内置注解

一、内置注解 Java内置注解 也称 Java标准注解,是Java JDK 中自带的注解。Java 中有许多标准注解,以下是一些常见的标准注解: 1. Override:用于表示一个方法是重写父类中的方法。 2. Deprecated:用于标记已经过时的方法…

WinPlan经营大脑垂直大模型,一站式解决企业经营管理难题

WinPlan经营大脑是杭州数利得科技有限公司打造的一款SAAS产品,为市场现存的企业经营管理难题,提供一站式解决方案。助力企业经营管理转型,帮助企业快速实现“经营规划管理&数据分析”线上化、可视化、数字化。 WinPlan决策系统 算力 阿里云 腾讯云 AWS亚马逊 框架 业务数…

Python入门【原生字符串、边界字符、search函数、re模块中其他常用的函数 、贪婪模式和非贪婪模式、择一匹配(|)的使用、分组】(三十)

👏作者简介:大家好,我是爱敲代码的小王,CSDN博客博主,Python小白 📕系列专栏:python入门到实战、Python爬虫开发、Python办公自动化、Python数据分析、Python前后端开发 📧如果文章知识点有错误…

MySQL 数据备份和数据恢复

目录 一、数据备份 1、概述 2、MySQLdump命令备份 1)备份单个数据库中的所有表 2) 备份数据中某个或多个表 3) 备份所有数据库 4)备份多个库 5) 只备份一个表或多个表结构 二、数据恢复 三、数据备份与恢复应用 一、数据备份 1、概述 数据备…

An easy problem

一、题目 we define f(A) 1, f(a) -1, f(B) 2, f(b) -2, … f(Z) 26, f(z) -26; Give you a letter x and a number y , you should output the result of yf(x). Input On the first line, contains a number T.then T lines follow, each line is a case.each case …

一、数据库基础

数据库 一、数据库基础 1、一些概念 数据库:数据库(DataBase ,简称DB),就是信息的集合。数据库是由数据库管理系统管理的数据的集合;数据库管理系统:简称DBMS 。是一种操纵和管理数据库的大型…

Vue 项目布署后,刷新页面(或跳转页面)出现 404 解决办法

Vue 项目布署后,刷新页面(或跳转页面)出现 404 问题背景为什么会出现404解决办法(两种)方法一:改变服务器配置方法二:改变路由模式 单页应用(SPA)概念 问题背景 今天重新部署一个vue项目的时候…

【NX】NX二次开发BlockUI集列表的详细使用步骤

最近使用NX二次开发,需要用到集列表,也就是SetList这个控件,然而网上相关的资料和范例实在是太少,有幸找到《NX二次开发-BlockUI集列表的使用技巧》和《UG(NX)二次开发 BlockUI 集列表使用方法》&#xff0…

Vue Cli 脚手架安装

Vue Cli 脚手架安装 首先,改一下仓库地址,使用下面的命令cnpm淘宝镜像加速 npm install cnpm -g --registryhttps://registry.npm.taobao.org下载安装 vue 脚手架 npm install -g vue/cli查看 vue cli 脚手架是否安装成功,如果输入命令出现…