Fly.io の「Hands-on」のページに従ってデプロイの練習をやってみた

### 前提

- [Fly.io](https://fly.io/)のページについては、2024年5月26日時点の構成で説明しています。
- 検証環境
    - MacBook Pro(Intel)
        - macOS Sonoma 14.5
    - Dell Latitude 3420
        - Ubuntu 22.04.4 LTS

---

[Fly.io](https://fly.io/)のページにアクセスし、画面上部メニューのから「[Docs](https://fly.io/docs/)」をクリックします。

![スクリーンショット 2024-05-26 12.55.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23093/345925ce-b19a-76a6-4d97-61d40c6cfb1f.png)

---

画面左側のメニューから「[Getting started](https://fly.io/docs/getting-started/)」をクリックします。

![スクリーンショット 2024-05-26 13.01.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23093/c8c4b83a-8fcc-2c23-c167-16bc3768d1f6.png)

---

「Getting started」のページを参照すると、「Launch on Fly.io」、「Hands-on」の順に進めるようなので、まずは「[Launch on Fly.io](https://fly.io/docs/getting-started/launch/)」をクリックします。

![スクリーンショット 2024-05-26 13.08.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23093/47e83162-7b92-da5a-91a0-02023e1c065d.png)

「[Launch on Fly.io](https://fly.io/docs/getting-started/launch/)」のページは、画面左側のメニューからも遷移できるようになっています。

![スクリーンショット 2024-05-26 13.14.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23093/b5be8d99-5e6e-9fd9-acae-61225069cabf.png)

---

「Launch on Fly.io」のページを参照すると、まず、flyctlコマンドを実行環境にインストールし、Fly.ioのアカウント作成（またはログイン）を行い、アプリケーションの作成と構築、そして、デプロイという手順で進めるようです。

![スクリーンショット 2024-05-26 13.17.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23093/8a30d383-96ea-be2e-543c-e8b69f43cb4e.png)

---

flyctlコマンドをインストールするため、「[Install flyctl](https://fly.io/docs/hands-on/install-flyctl/)」をクリックします。

![スクリーンショット 2024-05-26 14.48.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23093/c4c6f576-db75-5f56-0bc4-f663e9073675.png)

「[Install flyctl](https://fly.io/docs/hands-on/install-flyctl/)」のページは、画面左側のメニューからも遷移できるようになっています。

![スクリーンショット 2024-05-26 14.47.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23093/9b1300e6-9326-20d6-dec2-41ccb6c325c5.png)

「Install flyctl」のページには各環境ごとにインストール手順が記述されていますので、お手元の環境に合わせて実行します。

![スクリーンショット 2024-05-26 13.36.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23093/737dbfd7-df42-7509-dd1e-f2a705fc947d.png)

---

#### Mac環境

`flyctl` コマンドをインストールします。

```
% brew install flyctl
```

`flyctl` コマンドのバージョンを確認します。

```
% flyctl version  
flyctl v0.2.55 darwin/amd64 Commit: 0a7df8d78123d5809167cdaa11a78dec92a87e47 BuildDate: 2024-05-16T17:23:50Z
```

---

#### Ubuntu環境

`flyctl` コマンドをインストールします。

```
$ curl -L https://fly.io/install.sh | sh
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100  1735    0  1735    0     0   7517      0 --:--:-- --:--:-- --:--:--  7543
######################################################################## 100.0%
set update channel to shell
flyctl was installed successfully to /home/akase244/.fly/bin/flyctl
Manually add the directory to your $HOME/.bash_profile (or similar)
  export FLYCTL_INSTALL="/home/akase244/.fly"
  export PATH="$FLYCTL_INSTALL/bin:$PATH"
Run '/home/akase244/.fly/bin/flyctl --help' to get started
```

以下の2行を `.bash_profile` （または準ずるファイル）に追記します。

```
$ tail -2 ~/.bashrc 
export FLYCTL_INSTALL="/home/akase244/.fly"
export PATH="$FLYCTL_INSTALL/bin:$PATH"
```

`flyctl` コマンドのバージョンを確認します。

```
$ flyctl version
flyctl v0.2.59 linux/amd64 Commit: 76e31c66ca2982cb2e919f5bc34bb521451690a2 BuildDate: 2024-05-24T23:13:23Z
```

---

画面左側のメニューから「[Sign up / Sign in](https://fly.io/docs/hands-on/sign-up-sign-in/)」をクリックします。

![スクリーンショット 2024-05-26 13.53.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23093/d7a6d9b5-68c2-0008-dcc2-d871ff357f0a.png)

---

Fly.ioのアカウント登録はメールアドレス、Googleアカウント、GitHubアカウントのいずれかを選択できるようです。

![スクリーンショット 2024-05-26 13.55.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23093/878a2f10-f026-9751-0aa3-1978fe1a3bad.png)

---

`fly auth signup` コマンドを実行すると、以下のような表示になり、ブラウザが起動して「Sign up」画面が表示されます。

```
Opening 
https://fly.io/app/auth/cli/XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX ...

Waiting for session...⣯
```

![スクリーンショット 2024-05-26 13.59.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23093/56ae40f9-524a-2cc6-0ad2-f019861e2a08.png)

すべての入力が終えたら、「Create My Account」ボタンをクリックします。

![スクリーンショット 2024-05-26 14.03.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23093/dd048675-f391-8c9f-627b-30cf826329c3.png)

ターミナル上の表示が以下のように切り替わります。

```
% fly auth signup
Opening 
https://fly.io/app/auth/cli/XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX ...

Waiting for session... Done
successfully logged in as ログインアカウント
```

ブラウザ側もアカウント登録が成功した旨の表示に切り替わります。

![スクリーンショット 2024-05-26 14.06.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23093/14a08357-e356-8be8-33fd-1cecbfdefbc8.png)

---

メールアカウントによるアカウント登録を行った場合は、この時点で「Activate your Fly.io account」という件名でメールが届いているので認証処理を行います。
※Googleアカウント、GitHubアカウントの場合も同様の流れになるかは検証していません。

![スクリーンショット 2024-05-26 14.28.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23093/d5228c17-5fb6-5596-cefd-4cb728277894.png)

---

先程は、 `fly auth signup` の流れでログインまで完了したので、今度は `fly auth login` でログインしてみます。

アカウント登録時に利用していたターミナルを継続して利用する場合は、一旦ログアウトを行います。

```
% fly auth logout
```

`fly auth login` コマンドを実行すると、以下のような表示になり、ブラウザが起動して「Sign in」画面が表示されます。

```
% fly auth login
Opening https://fly.io/app/auth/cli/XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX ...

Waiting for session...⣷
```

![スクリーンショット 2024-05-26 14.20.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23093/693c5be0-304d-0be8-3f30-27077fb7351f.png)


入力を終えたら、「Sign In」ボタンをクリックします。

![スクリーンショット 2024-05-26 14.23.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23093/4d9fb5cc-fa67-120a-6fa8-61cd18c1ce7f.png)

ターミナル上の表示が以下のように切り替わります。

```
% fly auth login
Opening https://fly.io/app/auth/cli/XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX ...

Waiting for session... Done
successfully logged in as ログインアカウント
```

ブラウザ側もログインが成功した旨の表示に切り替わります。

![スクリーンショット 2024-05-26 14.25.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23093/04d90e1b-b15a-1741-a69d-47532a53b480.png)

---

画面左側のメニューから「[Launch app](https://fly.io/docs/hands-on/launch-app/)」をクリックします。

![スクリーンショット 2024-05-26 14.54.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23093/9d832c16-a099-d570-7b45-22a1e59505f3.png)

---

デモ用に準備されたDockerイメージを利用してアプリを作成します。

デフォルト設定のままでよいので「y」と入力しエンターを押下します。

```
% fly launch --image flyio/hellofly:latest
Using image flyio/hellofly:latest
Creating app in /Users/akase244/repo/akase244_hellofly
We're about to launch your app on Fly.io. Here's what you're getting:

Organization: akase244               (fly launch defaults to the personal org)
Name:         akase244-hellofly      (derived from your directory name)
Region:       Tokyo, Japan           (this is the fastest region for you)
App Machines: shared-cpu-1x, 1GB RAM (most apps need about 1GB of RAM)
Postgres:     <none>                 (not requested)
Redis:        <none>                 (not requested)
Sentry:       false                  (not requested)

? Do you want to tweak these settings before proceeding? (y/N) y
```

以下の表示に切り替わり、ブラウザが起動します。

```
? Do you want to tweak these settings before proceeding? Yes
Opening https://fly.io/cli/launch/XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX ...

Waiting for launch data...⣻
```

アプリ名を入力し、必要なスペックを選択します。

![スクリーンショット 2024-05-26 15.08.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23093/ce731e02-2a4b-503e-7027-b5b23e8023dc.png)
![スクリーンショット 2024-05-26 15.08.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23093/9a1629cb-bc78-c3a3-cce4-2dd09d493d8b.png)

---

この画面が表示されたらブラウザは閉じて構いません。

![スクリーンショット 2024-05-26 15.09.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23093/9d98d15a-66db-e3c5-d656-4ed2d9e65288.png)

---

ターミナルの表示がこのように切り替わるので「y」と入力しエンターを押下します。

```
Waiting for launch data... Done
Warning: This organization has no payment method, turning off high availability
Created app 'akase244-hellofly' in organization 'personal'
Admin URL: https://fly.io/apps/akase244-hellofly
Hostname: akase244-hellofly.fly.dev
? Create .dockerignore from 4 .gitignore files? (y/N) y
```

クレジットカード登録が未完了なため、以下のようにエラーが発生します。

```
? Create .dockerignore from 4 .gitignore files? Yes
Created /Users/akase244/repo/.dockerignore from 4 .gitignore files.
Wrote config file fly.toml
Validating /Users/akase244/repo/fly.toml
✓ Configuration is valid
==> Building image
Searching for image 'flyio/hellofly:latest' remotely...
image found: img_XXXXXXXXXXXXXXXX

Watch your deployment at https://fly.io/apps/akase244-hellofly/monitoring

Provisioning ips for akase244-hellofly
  Dedicated ipv6: XXXX:XXXX:X::XX:XXXX:X
  Shared ipv4: XXX.XXX.XXX.XXX
  Add a dedicated ipv4 with: fly ips allocate-v4

Error: input:3: createRelease We need your payment information to continue! Add a credit card or buy credit: https://fly.io/dashboard/akase244/billing
```

---

ブラウザでFly.ioの[ッシュボード画面](https://fly.io/dashboard)に遷移します。

![スクリーンショット 2024-05-26 15.20.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23093/6bf2bfac-6c6a-8c5b-41a0-cff608817cf3.png)

---

画面左側のメニューから「Billing」をクリックします。

![スクリーンショット 2024-05-26 15.19.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23093/e542f3a9-9846-fe7c-9983-749d9f160312.png)

---

「Account Status」に「Requires a credit card」と表示されていますので、「Add credit card」をクリックします。

![スクリーンショット_2024-05-26_15_21_46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23093/8563afad-3a75-3e60-edcc-fcbd2b168865.png)

---

今回は「Hobby Plan」を申し込むので、そのまま「Continue」をクリックします。

![スクリーンショット 2024-05-26 15.25.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23093/24875213-0ef2-4e7f-65b0-56e92dda15a3.png)

---

クレジットカード情報の入力が完了すると「Billing」画面が以下のような表示に変わります。

![スクリーンショット_2024-05-26_15_32_38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23093/6399e7c6-d5b2-0cef-9bbf-5c62f8bf23f8.png)


---

アプリ作成をやり直すためにダッシュボードから「akase244-hellofly」を選択します。

![スクリーンショット 2024-05-26 15.47.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23093/ca0fc788-7003-0177-e3eb-970665dffe0f.png)

画面左側のメニューから「Settings」をクリックします。

![スクリーンショット 2024-05-26 15.48.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23093/85ba7f94-0a93-e6b4-bbd0-fbcc68bc347a.png)

「Delete app」をクリックします。

![スクリーンショット 2024-05-26 15.49.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23093/082d9d32-1e57-89c0-5eae-6d1d28a80a47.png)

アプリ名を入力して、「Yes, delete it」をクリックします。

![スクリーンショット 2024-05-26 15.50.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23093/1cc465ee-bfed-2f4b-6830-f8aab59ff4c4.png)

---

アプリ作成をはじめからやり直すために、ローカル環境の `fly.toml` を削除します。
※こちらを利用して前回の続きからやる方法もありますが、今回は一旦削除して最初からやり直します。

---

`fly launch`　を改めて実行し、前回と同じ手順でアプリの作成を行います。

```
% fly launch --image flyio/hellofly:latest
Using image flyio/hellofly:latest
Creating app in /Users/akase244/repo/akase244_hellofly
We're about to launch your app on Fly.io. Here's what you're getting:

Organization: akase244               (fly launch defaults to the personal org)
Name:         akase244-hellofly      (derived from your directory name)
Region:       Tokyo, Japan           (this is the fastest region for you)
App Machines: shared-cpu-1x, 1GB RAM (most apps need about 1GB of RAM)
Postgres:     <none>                 (not requested)
Redis:        <none>                 (not requested)
Sentry:       false                  (not requested)

? Do you want to tweak these settings before proceeding? Yes
Opening https://fly.io/cli/launch/XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX ...

Waiting for launch data... Done
Created app 'akase244-hellofly' in organization 'personal'
Admin URL: https://fly.io/apps/akase244-hellofly
Hostname: akase244-hellofly.fly.dev
Wrote config file fly.toml
Validating /Users/akase244/repo/akase244_hellofly/fly.toml
✓ Configuration is valid
==> Building image
Searching for image 'flyio/hellofly:latest' remotely...
image found: img_XXXXXXXXXXXXXXXX

Watch your deployment at https://fly.io/apps/akase244-hellofly/monitoring

Provisioning ips for akase244-hellofly
  Dedicated ipv6: XXXX:XXXX:X::XX:XXXX:X
  Shared ipv4: XXX.XXX.XXX.XXX
  Add a dedicated ipv4 with: fly ips allocate-v4

This deployment will:
 * create 2 "app" machines

No machines in group app, launching a new machine
Creating a second machine to increase service availability
Finished launching new machines
-------
NOTE: The machines for [app] have services with 'auto_stop_machines = true' that will be stopped when idling

-------
Checking DNS configuration for akase244-hellofly.fly.dev

Visit your newly deployed app at https://akase244-hellofly.fly.dev/
```

---

実行結果の最後に表示されているURL https://akase244-hellofly.fly.dev/ にブラウザでアクセスすると、以下のように表示されました。

![スクリーンショット 2024-05-26 16.06.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23093/12b18de8-0813-1f73-50dc-b02b8408813e.png)

---

`fly.toml` の `internal_port` の値を修正します。

```
% diff fly.toml fly.toml.orig 
13c13
<   internal_port = 8888
---
>   internal_port = 8080
```

---

内部ポートの値を修正した状態で `fly deploy` コマンドを実行してデプロイを行ってみます。

```
% fly deploy               
==> Verifying app config
Validating /Users/akase244/repo/akase244_hellofly/fly.toml
✓ Configuration is valid
--> Verified app config
==> Building image
Searching for image 'flyio/hellofly:latest' remotely...
image found: img_XXXXXXXXXXXXXXXX

Watch your deployment at https://fly.io/apps/akase244-hellofly/monitoring

-------
Updating existing machines in 'akase244-hellofly' with rolling strategy

WARNING The app is not listening on the expected address and will not be reachable by fly-proxy.g that XXXXXXXXXXXXXX [app] is up and running
You can fix this by configuring your app to listen on the following addresses:
  - 0.0.0.0:8888
Found these processes inside the machine with open listening sockets:
  PROCESS        | ADDRESSES                              
-----------------*----------------------------------------
  /goapp/app     | [::]:8080                              
  /.fly/hallpass | [XXXX:X:XXXX:XXX:XXXX:XXXX:XXXX:X]:22  


-------
 ✔ [1/2] Machine XXXXXXXXXXXXXX [app] update succeeded
 ✔ [2/2] Machine XXXXXXXXXXXXXX [app] update succeeded
-------
Checking DNS configuration for akase244-hellofly.fly.dev

Visit your newly deployed app at https://akase244-hellofly.fly.dev/
```

デプロイ自体は成功したようですが、Fly.ioの内部ポートは「8080」で固定のようなので、 `internal_port` の値を元に戻して、再度デプロイを行いました。


```
% fly deploy                 
==> Verifying app config
Validating /Users/akase244/repo/akase244_hellofly/fly.toml
✓ Configuration is valid
--> Verified app config
==> Building image
Searching for image 'flyio/hellofly:latest' remotely...
image found: img_XXXXXXXXXXXXXXXX

Watch your deployment at https://fly.io/apps/akase244-hellofly/monitoring

-------
Updating existing machines in 'akase244-hellofly' with rolling strategy

-------
 ✔ [1/2] Machine XXXXXXXXXXXXXX [app] update succeeded
 ✔ [2/2] Machine XXXXXXXXXXXXXX [app] update succeeded
-------
Checking DNS configuration for akase244-hellofly.fly.dev

Visit your newly deployed app at https://akase244-hellofly.fly.dev/
```

---

一通り操作感が確認できたので、最後にアプリを削除して今回のデプロイ練習を終わりとします。

![スクリーンショット 2024-05-26 16.23.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23093/aae60e7e-0ebf-5715-e967-3ca9482d7b3c.png)