Open in app

Sign in

Write

Sign in

iPad Pro で VS Code な開発環境

Kohei Yoshida
11 min readNov 2, 2019

--

はじめに

iPad で開発ができないかと模索していたところ、とてもいい記事 を見つけたので実際に試してみた記録。
code-server と呼ばれるソフトウェアにより、ブラウザアクセスにより操作可能な VS Code をリモートサーバ上で動かせる。
セキュアな通信だったり認証周りだったりを考えるのが面倒だったので、AWS Client VPN を使ってそのへんをサクッと解消することにした。
(言うまでもなく、以下の話は AWS を前提としている)

※ここでは VPC を 172.31.0.0/16 としているが、接続元が特定のネットワークでない場合は 100.64.0.0/10 を利用すべきという指摘をいただきました。 link: RFC 6598

必要な作業は主に以下の 3 つであり、これに沿って作業をすすめる。

  1. Client VPN まわりの準備
  2. iPad OpenVPN まわりの準備
  3. code-server まわりの準備

1. Client VPN まわりの準備

1.1. 証明書および鍵の準備

▼ 証明書および鍵の準備

OpenVPN の提供する easy-rsa を利用する。OpenVPN/easy-rsa
使い方は外部記事などがたくさんあるのでそちらを参照してほしい。(参考 の章にも例を挙げた)
CA の Common Name なども特に決まりは無いので、適当で問題ない。

[ec2-user ~]$ git clone https://github.com/OpenVPN/easy-rsa.git
[ec2-user ~]$ cd easy-rsa/easyrsa3
[ec2-user easyrsa3]$ ./easyrsa init-pki
[ec2-user easyrsa3]$ ./easyrsa build-ca nopass
Common Name (eg: your user, host, or server name) [Easy-RSA CA]:vpn.yokohei.com
...
[ec2-user easyrsa3]$ ./easyrsa build-server-full server nopass
[ec2-user easyrsa3]$ ./easyrsa build-client-full ipad.vpn.yokohei.com nopass

▼ 関連ファイルをまとめる

[ec2-user easyrsa3]$ mkdir /tmp/yokohei-pki/
[ec2-user easyrsa3]$ cp pki/ca.crt /tmp/yokohei-pki/
[ec2-user easyrsa3]$ cp pki/issued/server.crt /tmp/yokohei-pki/
[ec2-user easyrsa3]$ cp pki/private/server.key /tmp/yokohei-pki/
[ec2-user easyrsa3]$ cp pki/issued/ipad.vpn.yokohei.com.crt /tmp/yokohei-pki/
[ec2-user easyrsa3]$ cp pki/private/ipad.vpn.yokohei.com.key /tmp/yokohei-pki/
[ec2-user easyrsa3]$ cd /tmp/yokohei-pki
[ec2-user yokohei-pki]$ ls -l
合計 28
-rw------- 1 ec2-user ec2-user 1188 10月 28 17:28 ca.crt
-rw------- 1 ec2-user ec2-user 4483 10月 28 17:28 ipad.vpn.yokohei.com.crt
-rw------- 1 ec2-user ec2-user 1704 10月 28 17:29 ipad.vpn.yokohei.com.key
-rw------- 1 ec2-user ec2-user 4568 10月 28 17:28 server.crt
-rw------- 1 ec2-user ec2-user 1708 10月 28 17:28 server.key[ec2-user yokohei-pki]$ cd ../
[ec2-user tmp]$ zip -r keys.zip yokohei-pki

これらのファイルを利用する。

1.2. ACM 設定

上のファイルを利用し、ACM に証明書をインポートする。

▼ サーバ証明書

  • 証明書本文: server.crt
  • 証明書のプライベートキ: server.key
  • 証明書チェーン: ca.crt

▼ クライアント証明書

  • 証明書本文: ipad.vpn.yokohei.com.crt
  • 証明書のプライベートキ: ipad.vpn.yokohei.com.key
  • 証明書チェーン: ca.crt

1.3. Client VPN 設定

マネジメントコンソールから Client VPN エンドポイントを作成。
設定時に注意する点は以下。

  • 「クライアント IPv4 CIDR」はクライアント側 (iPad に払い出される) CIDR なので VPC と被らないようにする
  • 「サーバー証明書 ARN」にて、ACM にインポートしたサーバ証明書を指定
  • 「認証オプション」にて 相互認証の使用 を選択し、ACM にインポートしたクライアント証明書を指定
  • その他はデフォルトのままで良い (変更したければご自由に)

▼ 作成後の作業

作成した クライアント VPN エンドポイント の 関連付け タブより VPC を関連付ける。
また、認証 タブから認証ルールを追加する。ここではアクセス可能にする CIDR を指定するので、接続先 VPC の CIDR などを指定すればよい。
最後に、クライアント設定のダウンロード から OpenVPN 設定ファイルをダウンロードする。

2. iPad OpenVPN まわりの準備

2.1. OpenVPN 設定ファイル

.ovpn はただのテキストなので、適当なエディタで編集すればオーケー。
デフォルトのファイルからの変更点としては、「ドメイン名の変更」と「証明書および鍵の埋め込み」を実施した。

▼ ドメイン名の変更

デフォルトではエンドポイントが cvpn-endpoint-xxxxxx.prod.clientvpn.eu-west-1.amazonaws.comといった形になっている。
これだと名前解決できないので、適当なサブドメインを追加する必要がある。ドキュメント曰くワイルドカードになっているので、何でもいい。

▼ 証明書および鍵の埋め込み

iPad から VPN を行うのでファイル構成などが複雑になると面倒。
なので、.ovpn ファイルに証明書と秘密鍵を埋め込んで利用。
<cert> および <key> を追加すればよい。

▼ サンプル

以下のような形になる。

yokohei-ipad.ovpn サンプル

client
dev tun
proto udp
remote yokohei.cvpn-endpoint-xxxxxxxxxxxx.prod.clientvpn.eu-west-1.amazonaws.com 443
remote-random-hostname
resolv-retry infinite
nobind
persist-key
persist-tun
remote-cert-tls server
cipher AES-256-GCM
verb 3
<ca>
-----BEGIN CERTIFICATE-----
(略)
-----END CERTIFICATE-----
</ca># ipad.vpn.yokohei.com.crt の内容を貼る
<cert>
-----BEGIN CERTIFICATE-----
(略)
-----END CERTIFICATE-----
</cert># ipad.vpn.yokohei.com.key の内容を貼る
<key>
-----BEGIN PRIVATE KEY-----
(略)
-----END PRIVATE KEY-----
</key>reneg-sec 0

2.2. iPad での準備

OpenVPN アプリを App Store からインストールし、上で作成した yokohei-ipad.ovpn をインポートする。
鍵が埋め込み済みなので、特に別途操作は必要ない。
画面右上のアイコンからログが見れるので、CONNECTED となっていれば問題なし。

設定が完了すると、iPad OS 設定画面の VPN のトグルからも接続できるようになる。便利。

3. code-server まわりの準備

3.1. インスタンスの起動

AMI やインスタンスタイプの選定だが、元記事には以下の通り記載されているので参考になるかもしれない。

Choose a location that’s in the country you usually live in, then use the Ubuntu 18.04 LTS image — it’ll save time later. Coder is a little heavy right now on resources (they say it’ll be fixed in an update soon), so you should choose a box with at least 2 CPUs and 6–8GB of RAM.

自分は Ubuntu 18.04 のイメージを利用したが、問題なく動いた。
なお、プライベート IP でのアクセスになるため IP アドレスの変更があると面倒。起動時に指定しておくと変わらないので楽。

3.2. code-server の起動

基本的には以下の操作だけでいける。

$ wget https://github.com/cdr/code-server/releases/download/2.1650-vsc1.39.2/code-server2.1650-vsc1.39.2-linux-x86_64.tar.gz
$ tar -xvzf code-server2.1650-vsc1.39.2-linux-x86_64.tar.gz 
$ cd code-server2.1650-vsc1.39.2-linux-x86_64/
$ ./code-server --auth none

port 8080 で接続を受け付けるような形で立ち上がる。
デフォルトでは起動時にパスワードが生成され、それを利用してアクセスすることになるが、--auth none をつけることで無効化出来る。

言うまでもなくオープンな環境では --auth none は非推奨だが、今回はこのインスタンス自体 VPC 内からのアクセスのみに制限しているので、問題はない。(セキュリティグループの設定をしっかりと)

セキュリティグループは Client VPN にて設定したサブネットの CIDR に対して Ingress 8080 を許可するのが最も絞る形になるか。(設定したサブネットに ENI が作成されるめ)
VPC の CIDR を広く許可してしまえば問題はないが。

4. iPad からのアクセス

VPN 接続後、対象のインスタンスのプライベート IP に 8080 でアクセス。
これだけで良い！

5. 参考

参考になる記事を紹介します。

IPad
IPad Pro
AWS
Vscode
VPN

--

--

Kohei Yoshida

Written by Kohei Yoshida

5 Followers

Help

Status

About

Careers

Press

Blog

Privacy

Terms

Text to speech

Teams