Remix indie-stackでアプリを作成する

Remix indie-stack でアプリを作って Fly.io にデプロイしてみます。

Remix indie-stack 作成

1. 以下のコマンドを入力します。今回は仮に tsuzuri というアプリを作成してみます。

   npx create-remix@latest
   

2. 対話形式でいろいろ聞かれるので、答えていきます。

   ? Where would you like to create your app? tsuzuri
   ? What type of app do you want to create? A pre-configured stack ready for production
   ? Which Stack do you want? (Learn more about these stacks: 'https://remix.run/stacks') Indie
   ? TypeScript or JavaScript? TypeScript
   ? Do you want me to run `npm install`? Yes
   

3. いろいろインストールやセッティングが行われます。完了したら以下のような表示がされます。

   Setup is complete. You're now ready to rock and roll 🤘
   
    Start development with `npm run dev `
    💿 That's it! `cd` into "C:\workspace\tsuzuri" and check the README for development and deploy instructions!
   

   npm run devを実行してみましょう。README.mdに書かれている E メールとパスワードを入力するとログインできます。

GitHub にリポジトリを作成する

先ほど作成した Remix アプリを VSCode で開きます。

まずは.github\workflows\deploy.ymlを見てみましょう。main ブランチと dev ブランチに push された時に GitHub Actions が実行されます。

name: 🚀 Deploy
on:
  push:
    branches:
      - main
      - dev
  pull_request: {}

とりあえず、サイドバーのソース管理のPublish to GitHubを行います。private でリポジトリを作成します。この時、master ブランチが作成されるので、GitHub Actions は実行されません。

ローカルでdevelopブランチを作成し、チェックアウトします。

次に develop ブランチから派生させる形でfeature/set-deployブランチを作成し、チェックアウトします。

ターミナルを開き、fryctl をインストールします。windows 環境で行っていますので、そのほかの場合はこちらからインストールしてください。

iwr https://fly.io/install.ps1 -useb | iex

Fly.io にログインします。アカウントを作成していない場合、サインインします。

flyctl auth login    // アカウントがある
flyctl auth signup   // アカウントがない

ステージング用と本番用の 2 つのアプリを Fly で作成します。アプリ名の後ろについているtsuzuri-d2beの部分は、fly.toml の app に書かれているアプリ名を使用します。

flyctl apps create tsuzuri-d2be           // 本番
flyctl apps create tsuzuri-d2be-staging   // ステージング

FLY_API_TOKENを GitHub のリポジトリに追加します。まず、ターミナルで以下を入力します。表示された文字列をコピーします。

flyctl auth token

GitHub のリポジトリの Settings→Secrets→Actions で Secret を作成します。Name はFLY_API_TOKENに設定し、Secret に先ほどコピーした文字列を貼り付けて Add secret します。

Fly アプリにSESSION_SECRETを設定します。openssl がインストールされていない場合は、こちらのサイトでランダムなシークレットを作成できます。

flyctl secrets set SESSION_SECRET=$(openssl rand -hex 32) --app tsuzuri-d2be           // 本番
flyctl secrets set SESSION_SECRET=$(openssl rand -hex 32) --app tsuzuri-d2be-staging   // ステージング

ステージングと本番環境で sqlite データベースの永続ボリュームを作成します。リージョンを選択するように指示されるので、Tokyo を選択します。

flyctl volumes create data --size 1 --app tsuzuri-d2be         // 本番
flyctl volumes create data --size 1 --app tsuzuri-d2be-staging // ステージング

.github/workflows/deploy.yml のmainをmasterに変更します。

// ...
  push:
    branches:
-      - main
+      - master
      - dev
// ...
-    # only build/deploy main branch on pushes
-    if: ${{ (github.ref == 'refs/heads/main' || github.ref == 'refs/heads/dev') && github.event_name == 'push' }}
+    # only build/deploy master branch on pushes
+    if: ${{ (github.ref == 'refs/heads/master' || github.ref == 'refs/heads/dev') && github.event_name == 'push' }}
// ...
      - name: 🚀 Deploy Production
-        if: ${{ github.ref == 'refs/heads/main' }}
+        if: ${{ github.ref == 'refs/heads/master' }}
// ...

.github/workflows/deploy.yml のdevをdevelopに変更します。

// ...
  push:
    branches:
      - main
-      - dev
+      - develop
// ...
-    if: ${{ (github.ref == 'refs/heads/master' || github.ref == 'refs/heads/dev') && github.event_name == 'push' }}
+    if: ${{ (github.ref == 'refs/heads/master' || github.ref == 'refs/heads/develop') && github.event_name == 'push' }}
// ...
-        if: ${{ github.ref == 'refs/heads/dev' }}
+        if: ${{ github.ref == 'refs/heads/develop' }}
// ...

修正した yml をコミットして、feature/set-deployブランチを publish します。
feature/set-deployをdevelopにマージするプルリクエストを作成します。
Actions を見ると、プルリクエストに対してワークフローが実行されています。

プルリクエストを行った場合はビルドは行われず、テスト等が行われます。

プルリクエストをマージしてみましょう。以下の画像のようになっていればデプロイ成功です。

Fly.io のダッシュボードに移動して、tsuzuri-d2be-staging のアプリに移動します。Hostname に表示されているリンクをクリックするとデプロイしたアプリが表示されます。

デプロイに失敗する場合

Fly アプリを作成するときに、fly.toml の app と同じ名前でアプリを作成しないとデプロイ時に失敗するようです。
Cache setup doesn't work on first run
fly.toml の app と同じアプリを作成しましょう。また、indie-stack で作成した Remix アプリの README.md には、そのまま使える状態のコマンドが記載されているので、そちらを打ち込みましょう。

終わりに

Remix アプリを作った時にできる README.md をなぞらえた形ですが、GitHub にリポジトリを作成するところだけ順番を変えてみました（ボタンポチポチでやりたかった）。Lint やテストからデプロイまでやってくれるのですごく楽でした。

いろいろ設定をいじってみてさらに快適にやってしていこうと思います。