【クラウド開発環境】GCPを使って快適なフロントエンド環境を構築する〜実践編〜

この記事は続きものになっています。今回は実践編です。
前回→[紹介編](https://qiita.com/bo_yakitarako/items/cc796d45783e449d0e18)

## 前回のあらすじ
クラウド開発環境はいいぞ。

## 構築してみる
ここからは実際にクラウド開発環境を構築していきましょう！
なお今回はMacからやってますんで、Windowsだとコマンドとかちょっと違う場合があるかもしれません。
まあ細かいところが違うだけで流れは同じです。なんかできなさそうなことあったら調べてみてください。代替するものはあるはずです。

### 1. Compute Engineのインスタンスを作成する
[Compute Engine](https://console.cloud.google.com/compute/instances)にアクセスし、プロジェクトが無い場合はプロジェクトを作成します。

![create_project.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569933/402ea59d-3e95-44ce-2498-b2585220a6e9.png)

課金の設定がなければ課金設定に飛ぶので、カード情報とかを入力して課金情報を登録しましょう。
**課金情報が無ければ当然インスタンスを使用することはできません**。

課金情報も登録できたら、Compute Engine APIを有効にします。有効にするだけなら特にお金はかかりません。
![activate.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569933/727eb775-bd41-1ec9-d7d8-084fce36354d.png)

有効になったらこんな画面になります！インスタンスを作りましょう！
![dashboard.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569933/0a63d182-bda7-b7c6-f1af-e1de5f6eab31.png)

インスタンス作成画面では、スペックを選択することができ、そのスペックに応じた費用を右側に出してくれます。
![create_instance.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569933/ae94561f-2aef-3dc3-e036-dd831d03e368.png)

自分は以下の設定にしていますが、こちらは臨機応変に変えていきましょう。クラウドの強みであります💪

項目|値
--|--
シリーズ|N1
マシンタイプ|n1-standard-2（2 vCPU、7.5 GB メモリ）
OS|Debian
ディスク種類|バランス永続ディスク
ディスク容量|30GB
その他|デフォルト

**ファイヤーウォールには何もチェックを入れないようにしましょう**。後で設定します
![firewall.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569933/7caf3887-02db-05b1-7562-881069fc558a.png)


作成ボタンを押せばインスタンスが作成され、さっきは何も無かった**インスタンス一覧に新しくインスタンスが起動した状態で追加されます！**
![new_instance.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569933/112af0e4-499b-62a3-d3a6-ceceb27da415.png)

ステータスが緑のチェックになり、外部IPにそれっぽいIPアドレスが入ってると思います(ここでは隠してます)

これで無事インスタンスが作成されました！しかしこれだけだとまだインスタンスに入って作業できません。次にインスタンスにSSH接続できるようにしましょう。

### 2. 作成したインスタンスに接続できるようにする
外部IP右の「SSH」を使えばブラウザからインスタンスに入れはするんですが、まあ使い勝手は悪いので自分のローカル環境からSSH接続してインスタンスに入るようにします。

#### 2の1. `ssh-keygen`する
SSH接続するために、公開鍵と秘密鍵を作成しましょう。

適当にターミナル開いて

```bash
$ ssh-keygen
```

sshキーの保存先が聞かれます。デフォルトは`~/.ssh/id_rsa`です。
複数の鍵を作る場合は名前分けたほうがいいですが、まだ何もない場合はデフォルトで良いのでそのままEnterでもOKです。
その後パスフレーズが聞かれますが、こちらは特に何も書かずにEnterでいいと思います。[^1]
[^1]: パスフレーズを設定しても、他で使ってるパスワードを使い回したり、強固なパスフレーズをローカルに保存しておくとかしたら意味ないです。SSH接続時に毎回パスフレーズ聞かれるようになって正直めんどいので今回は無くてヨシ！

こんなやつ出てくれば成功です

```
The key's randomart image is:
+---[RSA 3072]----+
|        . oo. o. |
|         o o.=.. |
|          + =.o. |
|           oooE  |
|        S .o * . |
|       .oo .% +  |
|       .==+B B . |
|       o+O+ * .  |
|       .=o++ .   |
+----[SHA256]-----+
```

`ls ~/.ssh`でファイルを確認すると、`id_rsa`と`id_rsa.pub`が生成されているはずです。

#### 2の2. 公開鍵をGCPに登録
[Compute EngineのSSH認証鍵](https://console.cloud.google.com/compute/metadata/sshKeys)から公開鍵(`id_rsa.pub`)を登録します
![ssh.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569933/5dc33acb-fe11-dd4d-fbfc-3306bf0d38fb.png)

**出てきた入力欄に`id_rsa.pub`の中身をコピペしてください**。
![pasted.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569933/54feb02f-907d-b027-23fc-6c54de2696dd.png)

これで保存すればOKです！

#### 2の3. 接続の確認
これで起動しているインスタンスにSSH接続できるようになってるはずです！
接続してみましょう

```bash
# ssh [ホスト] 的な感じ
$ ssh 111.111.111.111
```

ホストのところには入りたいインスタンスの外部IPを入れましょう。
鍵ファイルの名前を自分で指定した場合はファイル先のパスを指定してやる必要があります。例えばこんな感じ

```bash
$ ssh 111.11.1.0 -i ~/.ssh/bo_id_rsa
```

初回ログイン時はなんか`continue connecting?`とか聞かれますが、適当にyesしておきましょう。

なんかターミナルの感じが変われば成功です！これでインスタンスに接続できるようになりました！

#### 2の4. ファイアウォールの設定
このままだとインスタンスにhttpで接続できない(=ブラウザから実行結果が開けない)ので、ファイアウォールを設定してhttpとhttpsで接続できるようにします。

[ファイアウォールの設定](https://console.cloud.google.com/networking/firewalls/list)を開きます。
![スクリーンショット 2021-10-09 12.54.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569933/7b44b7fc-f57b-3a61-a722-a12ffc910d74.png)

デフォルトでなんか色々ありますが、**全部使わないので削除しちゃって大丈夫です**。
必要になったらルール作りゃいいんすよ

![スクリーンショット 2021-10-09 12.57.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569933/93894c85-e240-8b68-9ebf-0859e9444eac.png)

まっさらになりましたね。それではルールを作成しましょう。
![スクリーンショット 2021-10-09 13.00.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569933/54bccbdb-ec90-496f-8bbb-e2c71581d90b.png)

色々設定する項目ありますが、以下のように設定しましょう

項目|なんなんそれ|設定例
--|--|--|
名前|ルールの名前。そのまんま|bo-dev-ip
ターゲット|このルールを適用するインスタンスをフィルタリングできる。設定分けないなら`ネットワーク上のすべてのインスタンス`でおk|ネットワーク上のすべてのインスタンス
ソースフィルタ|フィルタを設定して接続範囲を限定する。**IP範囲を選択**|IP 範囲
ソースIPの範囲|指定したIPアドレスでしか接続できないようにする。<br>[自分のIPアドレスの確認はこちらから](https://www.cman.jp/network/support/go_access.cgi)。サブネットマスクまで指定する必要がありますが、`/32`って書いときゃ大丈夫です|114.51.4.19/32
プロトコルとポート|接続できるポート番号を指定する。プロトコルはTCPで、SSH、http、httpsで接続できるようにしたいのでそれぞれに対応する番号`22,80,443`を入力します。|✅ tcp: 22,80,443
その他|デフォルトでおk|

あとは「作成」ボタンを押して完了です👍
今一度SSH接続をやってみて接続できることを確認しておきましょう。22番ポートが解放されていればSSH接続できますので、それでファイアウォール設定がうまくいってるか確認できます。

### 3. エディタからインスタンスに接続する
ここではVS Codeでの接続例を提示します。他のエディタの接続方法はわからんぽよなので、他のエディタを使用する場合、このステップはなんとかご自身で頑張ってください。

#### 3の1. 拡張機能のインストール
ぼくが大好き[Remote - SSH](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-ssh)くんをインストールしましょう
![スクリーンショット 2021-10-09 19.26.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569933/df2dc94d-dcc4-f8e8-d741-d8b3fe75d7c4.png)

VS Codeの拡張機能で「Remote SSH」なんかで検索すれば一番上に出てきます。それをインストールしましょう。

#### 3の2. 設定ファイルを書く
以下のいずれかの方法で設定ファイル(`~/.ssh/config`)を開きます
![config.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569933/552ad622-2153-563d-1234-1e16b45f0d09.png)

- `F1`→`remote`と検索して出てくる`Remote-SSH: Open SSH Configuration File...`を選択
- Remote - SSHで追加されるタブ「リモートエクスプローラー」の設定アイコンをクリックし、`Remote-SSH: Open SSH Configuration File...`を選択![リモートエクスプローラー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569933/e83bbe26-eb50-f9ec-2c1e-7755cb032394.png)
- nanoとかviで直接開く(`nano ~/.ssh/config`)

設定ファイルが開けたら、以下の設定を追記します。

```config
Host bo-dev # 名前。なんでもいい

　　　　# 起動させたインスタンスの外部IP。
  HostName 11.45.14.19

　　　　# 公開鍵についてるユーザー名。
  # 今回のようにssh-keygenでユーザー名指定してないならローカルでログイン中のいつものユーザー名でおk
  User bo-yakitarako

  # 秘密鍵への絶対パス。ssh-keygenでファイル指定してないなら「~/.ssh/id_rsa」になるはず
  IdentityFile /Users/bo-yakitarako/.ssh/bo_id_rsa
```

言わなくても大丈夫だと思うけど上記のものは一例であって、そのまんま書いてもダメですからね？各々で対応するものに値を設定してください。

これで上記の場合は`bo-dev`という接続先に接続する準備が整いました。

#### 3の3. 接続！
以下のいずれかの方法で接続します。

- `F1`→`remote`と検索して出てくる`Remote-SSH: Connect to Host...`を選択すると、さっき設定した名前で接続先が出てくるのでそれを選ぶ![baka.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569933/08d4e393-5494-06c1-8b72-de6c55505b16.png)

- リモートエクスプローラータブからさっき設定した名前の接続先の右側のアイコンをクリックする![ooo.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569933/5c326922-a36b-4ba7-73e7-3fa8d0b4d565.png)

設定がうまくいってれば、VS CodeでSSHに接続した形になります！
![👍.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569933/33c32f49-3062-5058-bd7a-035b44dd45af.png)

うまく接続できたら最初にエクスプローラーからフォルダを開いておきましょう。フォルダを開いておけば、後から直接開いたフォルダに行けるようになります。
`Connect to Host...`から来るよりフォルダに行ったほうがなにかと便利やね

こうして|こうじゃ
--|--
![step1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569933/40d809f2-d4ab-dd28-749e-d77ea45f5868.png)|![step2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569933/be6119d0-1230-d425-4ff1-82516aa47c81.png)

ひとまずOKしてユーザーのホームディレクトリを開いておきます。

フォルダから入るには以下の方法があります。

- `ファイル`→`最近使用した項目を開く`→`フォルダのパス [SSH: 接続名]`を選択<br>※下記画像は会社のプロジェクト含まれてるんで一部隠してます![select_folder.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569933/09f4487b-bce4-a534-1287-97baa5d871f2.png)

- リモートエクスプローラータブから開く![tab.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569933/f822ab71-2f24-4113-8177-3601ad7a06f4.png)

#### 3の4. watch上限を最大にする
なにやらwatch上限なるものがあって、HMRとかgitとかが監視するファイルの最大数が設定されているらしいのです。
デフォルトでも`65536`くらいあるっぽいのででかくなんなきゃ大丈夫だと思うんですが、これ超えちゃうとHMRができなくなっちゃうんで、一応最大まで上げておきましょう。

このコマンドを実行してくだせえ

```bash
$ sudo sh -c 'echo fs.inotify.max_user_watches=524288 >> /etc/sysctl.conf' && sudo sysctl -p
```

`fs.inotify.max_user_watches=524288`とか言われたら適用できてます🌞

#### 3の5. 拡張機能入れる
ローカルとクラウドで拡張機能の管理は別なので、ローカルに入ってる拡張機能は入れ直す必要があります。
といっても`Local - インストール済み`って具合にローカルで入れてる拡張機能に絞って表示してくれて楽にインストールできると思います。ありがたや...ありがたや...
![extension.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569933/a0809284-fc9d-b3a0-84eb-e47d50010e64.png)

#### Remote-SSHのトラブルあるある
##### Q. `Permission Denied`とか言われて接続できない！
以下の原因が考えられます。

- **秘密鍵の絶対パスが違うかも**(よくやる)
- ユーザー名間違えてるかも
  - SSH認証鍵に登録した公開鍵の`ユーザー名`と同じにするようにしましょう![public.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569933/842d0a2b-5e33-583c-4008-b34241a096b1.png)
- そもそも`ssh-keygen`で鍵作ってないかも

##### Q. `Could not establish connection`とか言われるんだけど？
→**`known_hosts`にIPが登録されてるかも**

同時に起動しないと複数のインスタンスで同じ外部IPを共有します。`known_hosts`には最初にcontinueしたインスタンスとそのときのIPアドレスが登録されるのですが、それ以外のインスタンスでそのIPアドレスに接続しようとするとこのエラーになります。

対応策は簡単で、`~/.ssh/known_hosts`を開いて該当するIPアドレスが書かれてる行を削除するだけです。

### 4. nginxでhttp接続できるようにする
ブラウザからアクセスできるようにするために、nginxを設定します。
ここからはDockerでやったほうが良さみですが、Dockerよくわかんない(大敗)のでシステム直接いじっていきます。

とにもかくにもまずはインスールじゃい！

```shell
$ sudo apt-get update
$ sudo apt-get install nginx
```

インストールが完了したっぽかったら、nginxが動いてるか確認しましょう。

```shell
$ sudo systemctl status nginx
```

なにやら仰々しく色々でてきてたらOKです。

そうしたら、設定ファイルを書きます。
詳しい説明は省きますが、`/etc/nginx/conf.d`以下に設定ファイル(`***.conf`)を置くようにしていきます。

```shell
$ nano /etc/nginx/conf.d/dev.conf
```

`nano`とか`vi`で開いたら、以下のように入力します。(`nano`とか`vi`の使い方はググってちょ)

```conf:/etc/nginx/conf.d/dev.conf
server {
    listen 80;
    server_name bo-dev;

    proxy_set_header    Host    $host;
    proxy_set_header    X-Real-IP    $remote_addr;
    proxy_set_header    X-Forwarded-Host    $host;
    proxy_set_header    X-Forwarded-Server    $host;
    proxy_set_header    X-Forwarded-For    $proxy_add_x_forwarded_for;

    location / {
        proxy_pass http://localhost:3000/;
    }
}
```

書けたら保存して、nginxを再起動させて設定を適用しましょう。

```shell
$ sudo systemctl restart nginx
```

特になんも言われなければおkでごぜーます。

ブラウザから`http://bo-dev`に接続すると、nginxがプロキシになってインスタンス内の`localhost:3000`に繋いでくれるという流れですね。
とはいえ`bo-dev`の名前解決もやってないですし、そもそも`localhost:3000`も立ってないのでこの段階では接続はできません。

### 5. 開発用ドメインを名前解決する
突然`http://bo-dev`が出てきてちょっと困惑したかもしれません。申し訳NASA
というのもクラウド環境に`localhost`で接続するのはちょっとアレなんで、**開発用ドメインを勝手に用意してそこに接続する**形にしたいんですよね。

その開発用ドメインというのが今回でいうところの`bo-dev`ドメインです。これはわりと自由に決められるのでお好きな文字列をお使いいただけます。
自由に決められると言いつつ、多分これを見てるあなたに`bo-dev`は使えないかもしれませんが。は？

というのもですね、**他の人が既にどこかで開発用ドメインを名前解決してたら使えない**っぽいんですよね。`bo-dev`は僕が名前解決しちゃったのでみなさんは使えないというわけです。
でももしかしたら使えるかも。DNSようわからんぽよ...
ちなみに`dev`は使えませんでした。残念でした〜

話が逸れましたね。名前解決するとかなんか物々しいこと言ってますが、そんなに難しいことじゃありません。**ローカルPCのhostsファイルに1行追加すればいいだけです**。

**ローカルPCだからね！インスタンスのほうじゃないからね！間違えないでね！**

- Mac/Linuxの場合: `nano /etc/hosts`で開きます。(`sudo`必要かも)
- Windowsの場合: `Winキー+R`を押して出てきた入力欄に`drivers`と入力→`etc`フォルダに行ってその中の`hosts`を管理者権限で開く

末尾に以下のように入力して保存しまつ。

```config:/etc/hosts
# 開発用ドメイン
xxx.xxx.xxx.xxx XXXXXX
```

なにやら`xxx`とか並んでますが**`xxx.xxx.xxx.xxx`にはインスタンスの外部IPを、`XXXXXX`には開発用ドメインを入力します**。`bo-dev`の場合は

```config:/etc/hosts
# 開発用ドメイン
114.51.4.19 bo-dev
```

みたいな感じです。

保存できたらブラウザから`http://開発用ドメイン`に接続してみましょう。nginxの502画面が開くはずです。
![502.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569933/ab731b11-5f23-c52a-e520-08ccb221a244.png)

ここで、外部IPは間違えてないのにうまく接続できなかったら残念ながらそのドメインは使えません。別のドメインを`hosts`ファイルに書きましょう。

そしてこれでようやく準備が整いました。長かったぜベイベー

### 6. フロントエンド開発するぜ！
ぶっちゃけあとはローカルで開発するときの感覚と変わりないです。Node.js入れてyarn入れて[^2]`create-xxx-app`してっていういつもの流れですね。
[^2]: deyarn？知らない子ですね...

今回は試しにNext.jsやってみますね。

最初にNode.jsのバージョン変えたりしたいので`nvm`入れます。

↓nvmの最新バージョンのインストールスクリプトはこちらから↓
https://github.com/nvm-sh/nvm#install-script

以下の`curl`はバージョンが古い可能性があるので最新バージョンのインストールスクリプトをご使用くだせえ

```shell
$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
$ source ~/.bashrc
$ nvm ls-remote # インストールできるバージョンの確認
$ nvm install v14.18.0 # 現時点の良さげなバージョン入れました
$ node --version # Node.jsが入ってることの確認
$ npm install --global yarn # グッバイnpmお前のことは忘れねえぜ
```

`yarn`入れるとこまでです。特別なことは特にやってないですね。

それではここでは`~/projects`以下にNext.jsプロジェクトを展開したいと思います。この辺はお好みですね

```shell
$ mkdir ~/projects
$ cd ~/projects
$ yarn create next-app demo --typescript
```

いにしゃらいず終わったらフォルダをプロジェクトのトップのところで開き直しましょう。ここでは`~/projects/demo`ですね。

これで|こうして|こうじゃ！
--|--|--
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569933/6df61291-de87-cca8-599e-5483a792f721.png)|![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569933/fb6c8045-cb8c-c51d-72b9-fc97f6eb3877.png)|![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569933/e9183e60-5125-fef4-6c4b-c315d79f0d9c.png)

フォルダが開けたらいつも通りターミナルも開いておきましょう。これで開発プロジェクトを開くのも容易になったZOY！
![next_project.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569933/e4f399f2-2d6a-d6e1-d1fd-4636a0269af0.png)

したら`yarn dev`して開発サーバーを立ち上げましょう。
`compiled successfully`になったらさっき502になってた`http://開発用ドメイン`にアクセスし直してみましょう。
![welcome.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569933/9a7b7da1-e08c-07f2-c788-77f66c4559a7.png)

**成し遂げたぜ。**

盛り上がってきたのでちょっとタイトル変えてみましょう。

```diff:pages/index.tsx
        <h1 className={styles.title}>
-          Welcome to <a href="https://nextjs.org">Next.js!</a>
+          Welcome to <a href="https://nextjs.org">成し遂げたぜ。</a>
        </h1>
```

![ふおおお.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569933/ecc44bbe-147f-c515-8d74-12d754f8a052.png)

**ふおおおおおおおおおお変更がすぐ反映されてりゅうううううううううううううううううう**

このように、**クラウド環境でもHMRでの開発が可能です！**ｽｺﾞｲﾃﾞｽﾈ
あとは煮るなり焼くなり好きに開発していきましょう。

## 注意点
インスタンスは再起動するたびに外部IPが変わります。なので、**起動する度に`~/.ssh/config`と`/etc/hosts`を書き換える必要があります**。

毎回ファイル開いて変えるのもめんどいんで、僕はコマンドラインから`$ devip xxx.xxx.xxx.xxx`ってすると、`~/.ssh/config`と`/etc/hosts`の中身が入力したIPアドレスに変わるようにしてます。
具体的にはTypeScriptでスクリプト書いて`.zshrc`でエイリアス設定してる感じです。
スクリプトはこんな感じ↓

```typescript:src/index.ts
import { readFileSync, writeFileSync } from 'fs';

(() => {
  if (process.argv.length <= 4) {
    console.log('引数ねンだわ');
    return;
  }
  const [, , hostTitle, domain, IP] = process.argv;
  
  const etcReg = new RegExp(`^[0-9|\\.]+[\\s]+${domain}$`);
  const hostsLines = readFileSync('/etc/hosts', 'utf-8')
    .split('\n')
    .map((text) => {
      if (etcReg.test(text)) {
        return `${IP} ${domain}`;
      }
      return text;
    });
  writeFileSync('/etc/hosts', hostsLines.join('\n'));
  
  type ConfigLines = [string[], boolean];
  const configFilePath = '/Users/bo-yakitarako/.ssh/config';
  
  const [configLines] = readFileSync(configFilePath, 'utf-8')
    .split('\n')
    .reduce(
      ([lines, canRewrite], text) => {
        if (canRewrite && text.includes('HostName')) {
          const spaces = [...Array(text.indexOf('HostName') + 1)].join(' ');
          return [[...lines, `${spaces}HostName ${IP}`], false] as ConfigLines;
        }
  
        const reg = new RegExp(`^[\\s]*Host ${hostTitle}$`);
        const isUpdate = canRewrite || reg.test(text);
        return [[...lines, text], isUpdate] as ConfigLines;
      },
      [[], false] as ConfigLines
    );
  
  writeFileSync(configFilePath, configLines.join('\n'));
  
  console.log(`${IP}に書き換えといたわよ`);
})();
```

```shell
$ ts-node ./src/index.ts hostTitle domain IP
```

みたいに使います。(実際にはコンパイルしてます)

- `hostTitle`: `~/.ssh/config`で作った設定の名前
- `domain`: 開発用ドメイン
- `IP`: インスタンスの外部IPアドレス

`hostTitle`と`domain`を指定してIPアドレスだけコマンドライン引数にするという形でエイリアスを作ってます。

```bash:~/.zshrc
alias devip='(){node ~/Desktop/Node/ipreset/build/index.js bo-dev bo-dev $1}'
```

## おわりに
思ったより長くなってしまいましたが、これにてクラウド開発環境の構築は完了です。

ただまだできていないことがあります。**httpsでの接続**です。
これまたかなり曲者だったので、気が向いたらまた別で記事にしようと思います。

ほいじゃさいなら〜