静的HTMLページの展開を自動化する最も簡単な方法

写真でRiley Crawford on Unsplash
単純な静的なウェブサイトをホストする1つの方法は、あなたのファイルを保つためにAWS S 3を使うことです.
はい、インデックスを入れます.HTMLとスタイルのファイルをS 3のバケツに名前を付けます.そして、あなたのコンテンツを公開する準備が整いました.
次に、ルート53を使用して独自のドメインをリンクすることができます.
しかし、展開についてはどうですか?
私は、S 3のバケツにあなたのページを貼っているどんなコピーでも費やすことを望まないとあなたに保証することができます.あなたはより良いことがある!
これを自動化する私の簡単な方法は、ここにあります.あなたが話題に新しいならば、これは含まれるこの記事を読んで、30分の構成です!
だから、これ以上の話は、我々のパイプラインを構築しよう!
次のソリューションを実装するには、次の手順を実行します.

国債口座

AWS口座

ここにアイデアがあります.
あなたのウェブサイトのGithubリポジトリを作成する
2 . AWS IAMユーザの設定
Githubアクションの設定
変更を行い、展開する
5 .お祝い-少なくとも5分

1 . githubリポジトリを作成する

リポジトリが既に設定されているなら、パート2に行けます.
ここでは、変更を追跡し、配置をトリガーするために使用するリポジトリにコードを配置します.
1 . goGitHub アカウントに接続
新しいリポジトリを作成する

3 .リポジトリを必要とするパラメータを入力してください

Gitコマンドラインを使用してローカルのラップトップに新しく作成されたリポジトリをクローンしますGitKraken ).

git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY

あなたの倉庫で使用するURLを見つけ、「コード」ボタンをクリックします
Gitクローンの詳細については、Aを見てくださいthe GitHub documentation .
作成したフォルダにファイルを入れて

git push

簡単なサイトリポジトリの例
さて、もしあなたがhttps://github.com/<username>/<repositoryname >, あなたのコードは、メインブランチであなたを待って表示されます!
ファイン、今AWSのビットを持ってみましょう!

2 . AWS IAMユーザを作成する

あなたの目標は、S 3のバケツにいくつかのファイルをプッシュすることです.この目的のために、S 3バケットに権利を持つ必要があります.
あなたは、S 3方針でIAMユーザーを使用します.
1 .オープンAWS console
2 .に移動しますIAM page
3 .メニューの「ユーザ」をクリックして新しいユーザを追加する

4 .名前を選んでプログラムのアクセスを選択する

5 . S 3サービスを完全に制御する既存のポリシーを使用します.
デモンストレーションのためにこれを使用します.少なくとも特権特権を尊重するために独自のポリシーを作成することによって、よりセキュリティを強化することができます.)

6 .あなたがそれを必要とする場合、ユーザーを識別するためにいくつかのタグを置くことができます

7 .あなたの情報をレビューし、ユーザを作成する


ここでアクセスキーIDと秘密のアクセスキーを安全に保つ必要があります.これはログインパスワードに相当します.
そして、それはAWS IAM部分のためです!右の簡単なもの?
Githubに戻りましょう!

Githubアクションの設定

あなたは、S 3バケットにファイルを展開するためにGithubアクションを使用します.
GATTUBにAWSのユーザー権限を使用するには、作成したユーザー資格情報を設定する必要があります.
1 .リポジトリメニューの設定セクションに移動し、秘密をクリックする

2つの新しい秘密を作成し、IAMのユーザーの作成から保持値を置く.

AWS_SECRET_ACCESS_KEY

私たちの資格情報が用意されているので、ワークフローそのものを作りましょう.
ワークフロー内のすべての手順を作成する必要があります.ワークフロー/フォルダ.Githubアクションは、実行するものを見つけるためにこのフォルダを監視します.
3 .作成しましょう.ワークフロー/メイン.気象研

mkdir .github/workflow
touch .github/workflow/main.yml

次のコードをメインに追加します.YMLファイル:
ここでは、メインブランチでプッシュが発生するたびにいくつかのステップを実行するアクションを作成します.Ubuntu ( Linux )マシンでアクションを実行し、依存性を持っていますone of the already created AWS GitHub Actions .
それはあなたの資格情報だけでなく、地域を構成します.それはあなたのS 3バケツを作成したものに対応する必要があります.
次に、アクションステップを見ることができます.
単純なHTML/CSSフォルダを押しているので、ビルドステップはありませんが、ここでいくつかの手順を追加することができます.おそらくフォルダにいくつかのビルドアーティファクトを生成し、S 3のバケットには、このフォルダーを押してください.
AWS S 3 SYNCコマンドを使用して、フォルダ“TheFolderToDeploy”をS 3バケットの内容に同期させます.
これでメインブランチにプッシュできます.

4 .変更と展開を行う

あなたの行動が構成されているので、あなたのウェブサイトに見えるものを少し変えて、メインブランチにこの変更を押してください.
次に、GitHubリポジトリのアクションセクションに移動し、実行されるステップを観察してください!


If you want to know more about GitHub Actions, here is a link to spend some time on it !

おめでとう、祝賀時間！

写真でClay Banks on Unsplash
おめでとう!あなたは、本当に重要なことに集中する方法を見つけました:内容!
Githubのアクションは、あなたの静的なウェブサイトのための簡単なパイプラインを実装するための本当に良い方法です.あなたは数分以内に修正をプッシュする準備ができて、あなたはもはやあなたの展開の責任を負うことはありません.
そこから、あなたはGitHubアクションの小さな探査セッションを行うことができますまたはちょうどあなたのこのトピックを追加!
*
私はいつもフィードバックや質問、ここでコメントや私の*を開いている