Open25

Nx で簡単なアプリ作る

不肖・高橋不肖・高橋

Nx で作るランチガチャアプリ

  • 食べログで下記条件のお店をランダムで1つ表示
    • オフィス最寄り駅から半径300m 以内
    • ランチ営業している
    • 予算2,000円以下
  • ジャンルで絞り込める
不肖・高橋不肖・高橋

技術的な要件

  • Nx+Angular+Angular Material で作る
  • github pages で公開するSPA
  • データは手打ちでJSON 作成…
不肖・高橋不肖・高橋
$ npx create-nx-workspace --preset=angular
✔ Workspace name (e.g., org name)     · lunch-gacha
✔ Application name                    · app
✔ Default stylesheet format           · scss
✔ Use Nx Cloud? (It's free and doesn't require registration.) · No
不肖・高橋不肖・高橋
  • GitHub で develop branch 作成
  • Default branch をdevelop に切り替え
  • Branch protection rules でrelease-* とmain をPR 必須にする
    • Require review from Code Owners をtrue にしたけど大丈夫か…？
    • 'リポジトリのオーナーと管理者は、プルリクエストが承認レビューを受けていなかったり、あるいは変更をリクエストしたレビュー担当者がOrganizationを離れていたりアクセスできなくなっている場合でも、プルリクエストをマージできます。' のでOK 参考
不肖・高橋不肖・高橋

release-x.x branch でPR を作成しshipit ラベルを付けたらGitHub Actions で下記job が走る

  • GitHub Pages にdeploy
  • develop branchとmaster branch へmerge
  • vx.x というタグが付けられる
  • release-x.x branch を削除
不肖・高橋不肖・高橋

Nx の自動生成画面をv0.1 としてGitHub Pages にdeploy するチャレンジ

不肖・高橋不肖・高橋

現状リリース手順

  1. develop branch からrelease-x.x branchを作成
  2. release-x.x branch をdeploy
  3. release-x.x branch を master branch と develop branch にmerge
  4. release-x.x branch を削除
  5. master branch でvx.x のtag をつける
  6. GitHub 上で Release を作成
不肖・高橋不肖・高橋

Angular Material 入れてやっとAngular 書けると思いきや下記TODO が先

  • stylelint 入れる
  • husky / lint-staged 入れる
不肖・高橋不肖・高橋

最後の方のapp:lint-styles みたいに起動する方法について、 workspace.json は（少なくとも）angularだけで作ると存在しないので、代わりにangular.jsonに記載していく。

$ npm install @bmatei/stylelint-builder-angular --save-dev

angular.json app.architect 内に追記
files はdefault から変更してroot 下のapps から指定する。

        "lint-styles": {
          "builder": "@bmatei/stylelint-builder-angular:lint",
          "options": {
            "files": ["apps/app/src/**/*.scss"]
          }
        },
不肖・高橋不肖・高橋

Angular Material が生成するscss は結構エラー出るので、その部分だけdisabled にした。stylelint は途中からenable にできるから便利

不肖・高橋不肖・高橋
npx nx g @nrwl/workspace:lib data

でレストランのデータを入れるライブラリを作成

不肖・高橋不肖・高橋

下記story 完了

  • 最寄り駅から300m以内2,000円以下でランチが食べられる店を対象にできる
  • 店の名前を閲覧できる
不肖・高橋不肖・高橋

下記story 完了

  • 店名をリンクにして別タブで食べログページを開く
不肖・高橋不肖・高橋

v0.1 release作業感想

  • main とdevelop 両方にmerge ってPR 閉じたらbranch 削除する設定入ってたら駄目じゃね（汗)
  • 今回はrelease とdevelop に差分がなかったので大丈夫だった
  • 今回v0.1 で良かったのか分からないけど、さすがにUI 簡素すぎて公開できないのでヒヨってv0.1 にした
不肖・高橋不肖・高橋

Angular Material の入れ方

npm install @angular/material
nx g @angular/material:ng-add --project=app