はてなの金次郎

Pythonエンジニアの技術系ブログ

Nuxt + Firebase でWEBサービスを作るハンズオンに参加してきました

はじめに

js-builders.connpass.com

JavaScript Buildersさん主催の「Nuxt + Firebase でWEBサービスを作るハンズオン」にブログ枠で参加してきました。

前回の勉強会に引き続き2回目のブログ枠での参加です。

jumpyoshim.hatenablog.com

ハンズオンの内容

今回のハンズオンの内容はNuxt.jsアプリケーションをFirebaseにデプロイするというものでした。 実際に完成したL〇〇E風チャットアプリです。

nuxt-firebase-chat-a2ac6.firebaseapp.com

ログイン画面に名前を入力してログインするとチャット画面で会話をすることができます。

f:id:gyuuuutan:20181211132929p:plain
ログイン画面

f:id:gyuuuutan:20181211132956p:plain
チャット画面

Twitterに公開したのですでに何人かの人に入力してもらっていますね。

このアプリケーションを作成するにあたり、大きく以下のような章立てで進行されていきました。

  • Nuxt.jsとFirebaseの概要を知る
  • Nuxt.jsアプリケーションを作成する
  • Firebaseにプロジェクトを作成・アプリケーションをデプロイする

アプリケーション開発は完成形を目指して小さくタスクを段階的にクリアしていくという進め方だったので、一つ一つ理解しながら進めることができました。説明はもちろん丁寧だったのですが、ソースコードにコメントが豊富にあったのもありがたかったです。

ソースコードはHackMDで共有していただいて進行もとてもスムーズでした。

hackmd.io

当日の流れは ミミ@ROLO広報担当 / @rolotokyo さんのTwitterでツイートされています!

twitter.com

おわりに

主催のJavaScript Buildersさん、イベントの企画や運営本当にありがとうございました。
気になっていた技術に最小のコストで挑戦することができました。

どうしても業務に必要な技術の習得を優先してしまい、気になってはいるもののなかなか触れていない技術があるのは私だけではないかもしれません。

気になっているとはいってもそれに割けることができる時間は限られていますし、チュートリアルがあったりその技術に関するブログが公開されているといっても自分が今まで知らなかった未知の技術に一人で挑戦するのはなかなか骨が折れます。

すでに学習されている人から教わるという方法はその労力は何倍も小さくしてくれると思っています。しかし、教わるといってもそんなに簡単なことではありません。自分が学びたい技術の経験者という都合の良い知り合いは滅多にいませんし、オンラインサービスでもお金がかかることがほとんどです。

JavaScript Buildersさんの主催のハンズオンはそんな悩めるエンジニアのオアシスです。

無料で参加することができますし、美男美女の経験豊富なエンジニアが丁寧な資料で丁寧に説明してくれます。

そんな貴重な機会を無駄にしないように今回のハンズオンの復習と次のステップに向けた学習をコツコツ続けていきたいです。

次回は「Nuxt + TypeScript + Firebase でVuex&TSを学ぶハンズオン」が2019/01/18(金)19:00 〜 22:00で開催されるみたいです。

js-builders.connpass.com

ブログ枠はすでに埋まってしまっていたので一般枠での抽選待ちですがすでにかなりの倍率です...(当たるといいな)

倍率がすごいので本当は紹介したくないのですがとてもオススメのハンズオン勉強会なのでぜひ参加されてみてはいかがでしょうか!

.gitlab-ci.ymlの俺的Tips

はじめに

GitLab Advent Calendar 2018 9日目の記事です。

qiita.com

GitLabを使いはじめて1年半になりますが、.gitlab-ci.yml に関するノウハウがほどほどに溜まってきた気がするのでTipsとしてまとめてみました。

注意

  • Webアプリケーションの CI/CD に関するTipsが多いです。
  • .gitlab-ci.yml の例は Python/Django で書いていますが、特に難しいことは書いていないつもりです。適宜得意な言語に置き換えて読んでください。
  • 本記事では公式ドキュメントに倣い、 .gitlab-ci.yml の一つの実行単位を ジョブ、ジョブに定義する imagestage, script などのジョブのふるまいを キーワード と呼びます。
  • 補足 は読まなくても大丈夫です。気になる方は目を通してみてください。
  • だいぶ前に書き上げてはいたので意図してはないのですが、8日目の@mikiTさんの記事と重複する部分があります。

Index

  1. Services:コンテナイメージを複数扱う
  2. Anchors:ジョブのテンプレートでスリムなYAML
  3. Predefined variables:用意されているGitLab CI/CD変数を活用する
  4. Only and Except:制限付きのジョブを作成する
  5. when:manual:安心安全なデプロイ
  6. artifactsカバレッジレポートを可視化する

Tips

1. Services:コンテナイメージを複数扱う

docs.gitlab.com

services というキーワードを用いると、ベースイメージと接続可能なコンテナを定義できます。 Docker in DockerでコンテナレジストリにDockerイメージをプッシュしたり、単体テストでデータベースコンテナに接続したりするといったケースに有用です。

例えば、下記のように定義することで postgres というホスト名でPostgreSQLに接続できます。

services:
  - postgres:latest
variables:
  POSTGRES_DB: custom_db
  POSTGRES_USER: custom_user
  POSTGRES_PASSWORD: custom_password

PostgreSQLの公式イメージで用意されている環境変数にデータベース名、ユーザ名、パスワードを設定します。

環境変数に関する詳細はPostgreSQLのDockerHubを参照してください。
FYI: https://hub.docker.com/_/postgres/

DATABASE_URL で接続情報を表すと、 postgres://$POSTGRES_USER:$POSTGRES_PASSWORD@postgres:5432/$POSTGRES_DB となります。

2. Anchors:ジョブのテンプレートでスリムなYAML

docs.gitlab.com

Anchorsという機能を利用してジョブのテンプレートを作成することで、.gitlab-ci.yml をスリムに保つことができます。

例えば、test1, test2というテストをそれぞれ実行したいとき、

test1:
  stage: test
  image: python:latest
  before_script:
    - pipenv install --dev --system
  script:
    - pytest test1

test2:
  stage: test
  image: python:latest
  before_script:
    - pipenv install --dev --system
  script:
    - pytest test2

上記のように書くこともできますが、Anchorsを利用すると下記のように書くことができます。

.test_template: &test_definition
  stage: test
  image: python:latest
  before_script:
    - pipenv install --dev --system

test1:
  <<: *test_definition
  script:
    - pytest test1

test2:
  <<: *test_definition
  script:
    - pytest test2

今回の例では行数的な差があまり出ませんでしたが、ジョブが増えれば増えるほどAnchorsの効果が高まります。

〜補足〜
現段階では同じキーワードをテンプレートとジョブで重複して定義した場合、テンプレートのキーワードは実行されずジョブのキーワードが上書きされます。

stageimage であれば別にそれでも良いのですが、 before_scriptscript, after_script は実行するコマンド数が膨らみやすく、その一部分だけ共通しているといったケースがあります。

そんなときにコマンド単位のテンプレートが定義できると便利です。 探してみたらissueは起票されていたのでいつか機能追加されるかもしれません。
FYI: https://gitlab.com/gitlab-org/gitlab-ce/issues/24235

ちなみに、👍の数が多いほど注目度が高い人気のissueとしてコミッターやコントリビュータの目に止まりやすくなるので機能追加の優先度が上がるかもしれません。

追加してほしい機能だなと思った方は 👍しておくとよいかもしれません。

3. Predefined variables:用意されているGitLab CI/CD変数を活用する

docs.gitlab.com

.gitlab-ci.yml にはGitLabがあらかじめ用意している環境変数がいくつかあります。 それらを活用することで余計な環境変数定義をしなくて済んだり、別のプロジェクトでそのまま活用できたりします。

例えば、GitLabコンテナレジストリへのイメージのプッシュで Predefined variables を活用することができます。

build:
  stage: build
  image: docker:latest
  services:
    - docker:dind
  before_script:
    - docker login -u gitlab-ci-token -p $CI_JOB_TOKEN $CI_REGISTRY
  script:
    - docker build --pull -t $CI_REGISTRY_IMAGE:$CI_COMMIT_TAG .
    - docker push $CI_REGISTRY_IMAGE:$CI_COMMIT_TAG
  only:
    - tags

CI_JOB_TOKEN, CI_REGISTRY, CI_REGISTRY_IMAGE, CI_COMMIT_TAG は Predefined variablesです。

4. Only and Except:制限付きのジョブを作成する

docs.gitlab.com

onlyexcept というキーワードを定義すると、ある条件の場合のみジョブを実行したり、ある条件を除く場合のみジョブを実行したりすることができます。

例えば、タグがプッシュされた時だけ実行するように定義したり、

only:
  - tags

ある特定のブランチがプッシュされた時は実行をしないように定義したりすることができます。

except:
  - master

また、正規表現にも対応しているので特定のプレフィックスがついたブランチがプッシュされた時だけ実行するというような定義も可能です。

only:
  - /^release-.*$/

5. when:manual:安心安全なデプロイ

docs.gitlab.com

when:manual をジョブに定義すると、手動で実行ボタンをクリックしたらジョブが実行されるようになります。

f:id:gyuuuutan:20181202012650p:plain
ジョブにwhen:manualを定義したときのパイプライン

上記は when:manual をデプロイジョブに定義した際のパイプラインですが、プッシュしただけではデプロイジョブは実行されません。
「▶️」の実行ボタンを押すことで初めてデプロイジョブが実行されます。

これは本番環境へのデプロイジョブに有用で、不慮の事故を防ぐことができます。

6. artifacts:カバレッジレポートを可視化する

artifacts キーワードはジョブで生成された成果物をダウンロード可能にしたり、GitLab Pagesで公開したりするときに有用です。

例えば、下記のように定義すると、ユニットテストで生成されるカバレッジレポートをパイプラインからダウンロードできるようになります。

script:
  - pytest --cov-report=html
artifacts:
  paths:
    - htmlcov

f:id:gyuuuutan:20181202012834p:plain
ジョブにartifactsを定義したときのパイプライン

〜補足〜
カバレッジレポートはGitLab Pagesの機能を利用することで真価を発揮します。

GitLab Pages は GitHub Pagesと同じような機能ですが、 GitLabのリポジトリから静的サイトを公開するための機能です。

無料で利用できたり、httpsに対応していたりといった特徴があります。

docs.gitlab.com

GitLab Pages は以下の3ステップを行うだけで静的サイトを自動で生成してくれます。

  1. public という名前のディレクトリに静的ファイルを配置する。
  2. .gitlab-ci.yml にデプロイのジョブを定義する
  3. 定義したジョブを実行する

下記のURLは上記の3ステップで自動生成された実際のURLです。
カバレッジレポートを展開しています。

https://jumpyoshim.gitlab.io/django-polls

生成されたカバレッジレポートを public ディレクトリに配置し artifactspaths に定義するだけです。

ここで注意しなければならないのが deploy ステージでないとGitLab Pagesのドメインを生成してくれないことです。(どうしてもうまくいかなくて数時間悩まされました。)

pages:
  stage: deploy
  image: alpine:latest
  script:
    - mv htmlcov/ public/
  artifacts:
    paths:
      - public
  only:
    - master

FYI: https://gitlab.com/help/user/project/pages/index.md

参考例

上記のTipsを活用した .gitlab-ci.yml の例です。 以下を実行しています。

  • GitLabコンテナレジストリへのDockerイメージのプッシュ
  • ユニットテスト
  • 文法チェック
  • コードメトリクス計測
  • Herokuへのデプロイ
  • GitLab Pagesの公開設定

FYI: https://gitlab.com/jumpyoshim/django-polls/blob/master/.gitlab-ci.yml

.build_template: &build_definition
  stage: build
  image: docker:latest
  services:
    - docker:dind
  before_script:
    - docker login -u gitlab-ci-token -p $CI_JOB_TOKEN $CI_REGISTRY

build_for_master:
  <<: *build_definition
  script:
    - docker build --pull -t $CI_REGISTRY_IMAGE:latest .
    - docker push $CI_REGISTRY_IMAGE:latest
  only:
    - master

build_for_tags:
  <<: *build_definition
  script:
    - docker build --pull -t $CI_REGISTRY_IMAGE:$CI_COMMIT_TAG .
    - docker push $CI_REGISTRY_IMAGE:$CI_COMMIT_TAG
  only:
    - tags

.test_template: &test_definition
  stage: test
  image: python:3.7
  before_script:
    - pip install pipenv
    - pipenv install --system --dev
  except:
    - master

pytest:
  <<: *test_definition
  services:
    - postgres:latest
  variables:
    POSTGRES_DB: custom_db
    POSTGRES_USER: custom_user
    POSTGRES_PASSWORD: custom_password
  script:
    - export DATABASE_URL=postgres://$POSTGRES_USER:$POSTGRES_PASSWORD@postgres:5432/$POSTGRES_DB
    - python3 manage.py collectstatic --noinput
    - pytest --cov-report=html --tb=line
  after_script:
    - mv htmlcov/ public/
  artifacts:
    paths:
      - public

flake8:
  <<: *test_definition
  script:
    - flake8

radon:
  <<: *test_definition
  script:
    - radon cc -n C .
    - radon mi -n B .

deploy:
  stage: deploy
  image: ruby:2.5
  script:
    - gem install dpl
    - dpl --provider=heroku --app=$HEROKU_APP --api-key=$HEROKU_API_KEY --skip-cleanup
  only:
    - tags
  when: manual

pages:
  stage: deploy
  image: alpine:latest
  script:
    - echo 'Upload the coverage report'
  artifacts:
    paths:
      - public
  only:
    - master

おわりに

俺的と書いてありますがたくさんのドキュメントや記事、職場のエンジニア、GitLabコミュニティの方の助けで得ることができたTipsです。この場を借りてお礼申し上げます。
OSSへのコントリビュートなど、何かしらの形で恩返しをしていきたいと思っています。

ドキュメント

記事

GitLabコミュニティ

GitLabに関する機能や豆知識を7つ厳選してみました。
もしよろしければのぞいてみてください。

qiita.com

JapanCotainerDays v18.12 これだけは目を通しておきたいセッションベスト3

はじめに

Kubernetes2 Advent Calendar 2018の8日目の記事です。

qiita.com

12/4・5で開催されたJapanContainerDays v18.12に参加してきました。

containerdays.jp

どのセッションもとても勉強になり甲乙はつけがたく、また、自分自身甲乙をつけられる立場ではありませんが、本記事では個人的におすすめだったセッションを「これだけは目を通しておきたいセッションベスト3」として独断と偏見でご紹介させていただきます。

※注意

  • ECSでのアプリケーション構築・運用経験があります。
  • GitLabを業務で使っています。個人的にもGitLabとGitHubの両方を使っています。
  • Kuberntesは独学で「入門Kuberntes」・「コンテナ・ベース・オーケストレーション」を読んだことがあり、GKEやAKSのKaaSでサンプルアプリケーションをデプロイしたことがあるレベルです。
  • 新卒2年目のペーペーです。
  • 繰り返しになりますが独断と偏見です。

これだけは目を通しておきたいセッションベスト3

1. Microservices on Kubernetes at Mercari

スライド

speakerdeck.com

YouTube

youtu.be

Twitterで多くの反響を集めたキーノートの一つでした。
動画とスライドをぜひ見ていただきたいのですが一応まとめておきます。

テーマ

  • なぜメルカリがマイクロサービスアーキテクチャの基盤にKubernetes(そもそもコンテナ技術)を選択するのか
  • Kubernetesを利用して今後どうしていきたいのか

テーマに対する解答(独自の解釈を含む)

  • なぜメルカリがマイクロサービスアーキテクチャの基盤にKubernetes(そもそもコンテナ)を選択するのか
    -> ビジネス競争力のあるソフトウェアをリリースするため
    -> ビジネス競争力を高めるためにはスピード感が大切
    -> スピード感をマイクロサービスアーキテクチャとImmutable Infrastructureによって実現する
    -> マイクロサービスアーキテクチャによる独立・自立したチーム作りで自走可能なチームがスピード感を生み出す
    -> Immutable Infrastructureによる決定論的なデプロイで本番環境へのリリースの心理的安全性を高め、開発者のデプロイに対するハードルを下げることでスピード感を生み出す
    -> マイクロサービスアーキテクチャ・Immutable Infrastructureを実現するためにはコンテナが向いている
    -> オーケストレーションサービスにはECS・HerokuなどのPaaSではなく拡張性の高さとエコシステムの豊富さが特徴であるKubernetesを選択する

  • Kubernetesを利用して今後どうしていきたいのか
    -> Kubernetesの拡張性の高さとエコシステムの豊富さを活用して柔軟にビジネス要件に対応していく

感想

組織として「なぜその技術に取り組むのか」という定義ができているのが大変素晴らしいと感じました。
このトークを聞いて思い出したのはTEDで公開されているサイモン・シネックさんによる「優れたリーダーはどうやって行動を促すのか」という講演です。

www.ted.com

ここで紹介されているのは、偉大な指導者や組織に共通しているあるパターンです。
それは「WHAT」ではなく「WHY」から考え行動するというもので、それが結果的に人の心を動かすそうです。
なぜコンテナなのか、なぜKubernetesなのかが最初に共有されていたため、今後の展望も納得感があり多くの人が共感しTwitterでの反響に繋がったのではないかと思いました。

自分自身も学習する際は、なぜその技術を身につけるのかという自問自答をしていきたいです。

2. GitLabによるコンテナCI/CDパイプラインのこれから

スライド

www.slideshare.net

GitLabユーザとして押さえておきたい内容だと感じたためピックアップしました。

テーマ

  • なぜGitLabのAuto DevOpsがよいのか
  • GitLabのAuto DevOpsとは何か

テーマに対する解答(独自の解釈を含む)

  • なぜGitLabのAuto DevOpsがよいのか
    -> 多くの企業はDevOpsパイプラインにおいて3~6個のツールを利用しており、技術選定コストや学習コストがかかっているという課題があるため
    -> GitLabはDevOpsパイプラインにおけるツールを包括して提供している(Complete DevOps)
    -> ソフトウェア開発に時間を費やす環境を提供するため
    -> CI/CDパイプラインに必要な設定を動的に行う仕組み(PaaS)を提供している=>Auto DevOps

  • GitLabのAuto DevOpsとは何か
    -> Auto DevOps is PaaS for Kuberntes
    -> 開発者はコードを書いてプッシュするだけ。残りは全てAuto DevOpsがよしなにやってくれる
    -> 残りとは、コード品質チェック・コードやDockerイメージのセキュリティチェック・依存関係チェック・一時的なアプリケーションレビュー環境の構築・Kubernetesクラスターへのデプロイ・Sitespeed.ioによるWebページのパフォーマンス測定・Prometheusによる監視など

感想

GitLabをまだまだ使いこなせていないことを実感しました。 初期の導入を手動で行なったり定常的な作業を手動で実施していたりという部分が何箇所か思い当たったので、そういう部分はAuto DevOpsで自動化できそうだなと感じました。

Auto DevOpsは導入は大変かもしれませんが運用は比較的楽になるのではと感じました。 また、Auto DevOpsはGoogleアカウントにサインインしていればGitLabから動的にGKEクラスターを作成してくれるという機能があったり、昨日AzureからGCPへの移行が話題になりましたがGitLabとしてもGCPとの連携を推し進めていたりと、GitLabとGCPの親和性はかなり高いです。 Auto DevOpsを導入するのであれば、GCPを利用するのが良さそうです。

3. 本番環境のKubernetesマニフェストに 最低限必要な 7 のこと

スライド

speakerdeck.com

テーマ

テーマに対する回答

  • 本番環境のKubernetesマニフェストに 最低限必要な 7 のことは何か
    -> コンテナのライフサイクル(起動時)
    -> コンテナのライフサイクル(停止時)
    -> ヘルスチェック
    -> メンテナンスとアップデート
    -> スケジューリング
    -> リソースの割り当てと基準
    -> カーネルパラメータのチューニング
    -> インターネットからのアクセス制御

感想

とりあえずこの7つのTipsを抑えておけば本番環境にKubernetesを導入することができる(運用はまた別)とのことで、わかりやすく端的にまとめられている資料でした。

特に初期化処理の方法やコンテナ停止時の挙動に関する話はとても参考になりました。

Kuberntes実践ガイドも合わせて読みたいですね。

Kubernetes完全ガイド (impress top gear)

Kubernetes完全ガイド (impress top gear)

全体の感想

Kuberntesはコンテナオーケストレーションとしてデファクトスタンダードとなった
by Chris Aniszczyk / キーノートより

Kuberntesの話を聞きにいったつもりでしたが、Kuberntesとその周辺のエコシステムを活用していかに運用を楽にするか、いかにビジネス競争力が高いソフトウェアを作るかという話にシフトしているようでした。

コンテナ⇨Kuberntes⇨クラウドネイティブ(ここの話が多かったです)

事実、JpanContainerDaysは今年で終わりで来年からはCloud Native Days 2019となります。
勉強になることだらけでとても刺激的な2日間でした。運営のみなさまありがとうございました。
次回は一回り成長して参加したいです。

(聞けていないセッションが結構あるのでおすすめのセッションがあればぜひ教えてください!)