这是针对Pulumi Deploy and Document Challenge的快速静态网站部署提交。
我造的东西大家好,开发者社区!希望这能成为我众多帖子和挑战尝试中的第一个。我用C#开发的项目用了Google云存储服务,只需把编译好的网站文件丢到一个文件夹里就可以快速创建静态网站原型。
在线演示链接以下是几个网站链接:
网址:http://storage.googleapis.com/bucket-site1-9e13468/index-48A01530.html
网址:http://storage.googleapis.com/bucket-site2-ee21e84/index-90BB84EE.html
网址:http://storage.googleapis.com/bucket-site3-f0559b4/index-88A85004.html
我为DEV竞赛做的第一个Pulumi项目
使用 Pulumi 创建静态网站 - 基础设施即代码这是为了参加由 Pulumi 赞助举办的 DEV 挑战而创建的项目。该项目的主要功能是利用 Pulumi .NET SDK 创建使用 Google Cloud Bucket 存储的由 index.html 驱动的网站,从而实现从一个文件夹快速地部署静态网站。
先决条件和需求
这个项目用C#编写,会需要一些东西。
1. Visual Studio Code(虽然任何版本的 Visual Studio 都可以),
2. Pulumi CLI,
3. Google CLI,
4. Google Cloud 项目 ID(如 my-project-123),
安装完客户端后,你需要确保你能够访问或找到你的 Google Cloud 项目的 ID。如果你是 Pulumi 新手,我推荐你看看我在 Dev.to 上写的这篇文章,它介绍了基本的安装步骤,或者你也可以直接在Pulumi 获取更多信息。
git clone https://github.com/celopez3/MyFirstPulumi.git
cd MyFirstPulumi
export GCP_PROJECT_ID="<项目ID>" # 项目ID请替换为您的实际项目ID
全屏 退出全屏
部署要启动这个项目,请运行命令。
Pulumi(一种基础设施即代码的平台)
zh: 由于提供的英文文本内容为空,这里也是空白的。
全屏模式 退出全屏
我的旅途这是我第一次使用 Pulumi,所以我决定先从阅读文档和注册账户开始。很快我便发现,安装 Pulumi CLI 是必不可少的第一步。
我按照使用 Pulumi 和 Google Cloud 入门中的步骤来操作。我通常会安装 chocolatey,但在此次操作时,因为我不能使用 chocolatey,所以我不得不使用AMD64 MSI 包。
通过 PowerShell 脚本验证安装是否成功。我之前已经安装了 .NET8,但该指南提供了一个链接,如果你需要安装它。
最后,我需要选择一个云框架,通常选择C#的话,你可能会以为我会选择Azure,不过我在设置Azure账户的时候碰到了手机号的问题。我提交了一个工单,问题确实得到了解决,然后我决定转向Google Cloud Platform,并安装了GCloud CLI工具。
这个时候你应该在Google控制台为自己创建一个项目。如果你对这个不熟悉,可以查看Google的文档并直接点击“管理资源”按钮来快速创建项目。
当 GCloud CLI 完成后,它将打开一个命令提示符,以便完成接下来的步骤:
1) 用您的 Google 帐号登录
2) 选择项目。
一旦你完成身份验证,项目将被列出,然后选择要使用的项目。在我的情况中,我创建了一个名为“pulumi”的项目,例如。
现在我们的环境已经设置好了,接下来打开Powershell控制台,切换到你希望生成代码的目录中,并运行以下命令即可。
第一个命令创建了一个 quickstart 文件夹并进入它。第二个命令调用了 pulumi CLI 来生成一个 aws-csharp 项目,不过我实际运行的是
pulumi new gcp-csharp
# 该命令用于使用Pulumi在Google云平台上创建一个新的C#项目。
如果你是第一次使用 pulumi,系统会提示你登录并设置 Pulumi Cloud 和 CLI 的连接。按照接下来的指南,你就可以把静态网站部署到 Google 存储桶上了。这真是个酷炫的开始,但我还想更进一步。
我的项目探讨了三种场景,这些场景涉及将快速原型简化为静态网页并部署到Google存储桶。第一个场景(例如:http://storage.googleapis.com/bucket-site1-9e13468/index-48A01530.html)是一个默认的HTML模板,可能是手动创建的。
在<head>
标签中,你可以看到一个最小化的Bootstrap5和一个本地的style.css文件。正文部分是根据Bootstrap5 模板中的设置完成的,具体来说,使用的是Blog模板。
第二个情景是一个 Next.js 或者是一个静态网站,被导出后。基本上,这是一个导出的静态网站。我首先从GitHub下载了一个 Startup Next.js 模板。
我在 next.config.js 文件里加了这一行:
输出: '输出'
当你运行时,Next.js 项目会被编译到名为 'out' 的文件夹里。
npm run build
# 该命令用于构建项目
最后,第三种情形是直接下载一个免费的HTML模板,解压并运行文件,然后运行它们。
使用 Pulumi (Pulumi 使用指南)你将在Program.cs文件中找到我提交的主要代码。我首先创建了一个名为websites的目录,并为了快速部署网站,我建立了3个文件夹,分别是site1、site2和site3这三个文件夹。每个文件夹里都包含了与上述情况相关的文件。
然后我用 Pulumi 为每个站点创建存储桶(bucket)。
桶创建完成后,我会遍历每个站点的目录,并为每个文件创建存储对象。这包括它们的子目录。Bucket 对象用于每个文件。
在包含 Program.cs
的文件夹中运行 pulumi up
命令,特别是上传 index.html
文件,并且显示自动部署的网站 URL 地址。
重要的是要注意,我仓库中的代码是硬编码使用index.html
的,但是它也很容易调整为适应任何其他HTML文件。
在整个过程中,我确实学到了很多。在最终确定提交之前,我探索了不少路径。我不会说使用Pulumi的过程感觉很容易,但从未感到困窘或找不到解决办法。他们的在线文档和丰富的示例真的加速了我的整体体验。最重要的一点是,现在有了这个项目,我就能通过简单地将文件放入文件夹中来快速构建网站模板的原型。
我觉得Pulumi有很大的潜力,并期待下一个项目。要是我有更多时间就好了,我想提交一个用Pulumi实现的Docker部署方案,不过我恐怕赶不及4月6日的截止时间。
如果有任何想法或问题,可以在评论中告诉我,谢谢你的关注和支持,谢谢大家。
共同學(xué)習(xí),寫下你的評論
評論加載中...
作者其他優(yōu)質(zhì)文章