GitHub_ActionsとDockerでプロジェクトを公開する　#198日目

モリユウキ|YM202110

2022年6月14日 21:33

前回からの続きで、GitHub Actionsを用いたCI / CDの実装に関してです。

このチュートリアルから学びました。

前回はCIに関してまとめました。

今回はCIの次のフェーズに該当する、Continuous Delivery (CD) の実装についてまとめてみます。

CIはコードのテストを自動化することでエラーの早期発見や品質向上に寄与するもので、頻度高く実行されるものでした。CDは実際にローカル環境で公開してみることで、本番環境に近い状態でエラーが起きないか、想定通り挙動しているかチェックすることができます。

GitHubに分かりやすい概念図がありました↓

https://github.com/skills/publish-packages

今回はDocker imageを用いて実際に立ち上げるところをやってみます。Dockerに関しては以前いろいろと記事を書いたので、よければ見てみてください↓

workflow fileとDockerfileを作成する

表題の2ファイルをサクッと作成します。この手順によりGitHubのProfileにある「package」で、作成したWebアプリが公開されます。

まずworkflow fileを作成します。repositoryのパスを指定する際は、全て小文字で記載する必要があるので要注意です。ユーザー名がYM202110の場合、パス部分は「ym202110」と記載します。

mainブランチにプッシュした時に起動するようにしています。

[/.github/workflows/publish.yml]
 
name: Publish to Docker

on:
  push:
    branches:
      - main

jobs:
  publish:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2

    - name: Build container
      uses: docker/build-push-action@v1
      with:
        username: YM202110
        password: ${{ secrets.GITHUB_TOKEN }}
        registry: docker.pkg.github.com
        repository: ym202110/publish-packages/game
        tag_with_sha: true

次にDockerfileです。これはプロジェクトのrootに直接置きます。「.」と「/usr/share/nginx/html」の間にスペースがあることが注意点です。ここでのCOPYコマンドの意味は、直下にある全てのファイルをコンテナの「/usr/share/nginx/html」というディレクトリに配置する、です。

また、FROMはベースイメージを指定するコマンドです。ここで指定しているのは「エンジンエックス (nginx)」という、処理性能・高い並行性・メモリ使用量の小ささに焦点を当てて開発されているオープンソースのWebサーバーです。

[/Dockerfile]
 
FROM nginx:1.17
COPY . /usr/share/nginx/html

アクセストークンを取得する

上記で立ち上がったパッケージを、コマンドラインから編集したりするためのアクセストークンを取得しておきます。アクセストークンは以下ページの方法で簡単に取得できました。

Dockerにログインする

コマンドラインから、GitHubにあるDockerにログインし、Imageを引っ張ってみます。まずは以下コマンドでDockerにログインします。コマンドラインはGit Bashがおすすめされました。

$ docker login docker.pkg.github.com -u ユーザー名 -p 取得したアクセストークン

ログイン出来たら、PackagesからImageをPullするためのコマンドを見つけてコピペします。

Docker ImageをPULLする

自分のプロフィールページのPackagesをクリックして、先ほど作成されたgameパッケージをクリックします。

最新のImageにアクセスします。

Pull image from the command lineという項目のコードを使えばOKです。

コマンドラインで上記コードを実行して、以下のように表示されれば成功です。

sha-49dc1e5: Pulling from ym202110/publish-packages/game
Digest: sha256:XXXXXXXXXXXXXXXXXXXXXXXXXXXXX
Status: Image is up to date for ghcr.io/ym202110/publish-packages/game:sha-49dc1e5
ghcr.io/ym202110/publish-packages/game:sha-49dc1e5

イメージがPULLできているか確認します。

$ docker image ls

以下のように表示されれば成功です。

REPOSITORY                               TAG           IMAGE ID       CREATED             SIZE
ghcr.io/ym202110/publish-packages/game   sha-49dc1e5   938de134be13   About an hour ago   127MB

コンテナを立ち上げる

イメージの準備ができたので、いよいよコンテナを立ち上げます。

$ docker run -d -it --rm -p 8080:80 --name ttt ghcr.io/ym202110/publish-packages/game:sha-49dc1e5

上記でtttという名前のコンテナが立ち上がります。最後の部分は<YOUR_IMAGE_NAME:TAG>となっていて、docker image lsで確認したREPOSITORYとTAGを引用します。

localhost:8080にアクセスすると、チュートリアルのコードを使っていれば、以下のようなゲームが表示されます。

これで一連の流れが完了です！
ここまでお読みいただきありがとうございました！！

この記事が気に入ったらサポートをしてみませんか？

GitHub_ActionsとDockerでプロジェクトを公開する #198日目