AWS Cloud９
今年のAWS re:Invent 2017では沢山の発表がありました。新発表の中には「AWS Cloud9」というIDEがありました。「AWS Cloud9」の前身である「 Cloud9」はプログラミング（開発）やデータベースなどをクラウド環境で利用できるサービスでした。IDE（統合開発環境）としての機能が充実しており、GitHubやBitbucket、Herokuといった他のツールとの連携も人気でした。
kintoneデベロッパーの中にもプラグイン開発などを「 Cloud9」で行なっていた人も少なくはないと思います。
「AWS Cloud9」では、以下のような機能があります。
・ブラウザ上で開発を行うことが可能
・コラボレーティブなコードの編集やチャット
・サーバーレスアプリケーションの簡易構築
・AWSへの直接端末アクセス（EC２など）
・任意のLinuxサーバーへの接続
詳しい機能はこちら
kintone開発にIDEとして利用できるか？
前身である「Cloud9」ではkintoneプラグイン開発、カスタマイズ開発などで利用したりしていましたが、「AWS Cloud9」でもkintoneの開発を行うことはできるのでしょうか？
せっかくリリースされたサービスなので試してみたいと思います。
CDN利用したkintoneカスタマイズ開発
kintoneデベロッパーなら、ファイルを変更する度にkintoneにアップロードするのは「面倒」と一度は感じたことがあるのではないでしょうか？
そういった手間を減らすためにDropboxやGoogleドライブなどのクラウドストレージをCDNに見立てて開発する手法もあります。
AWSCloud9はEC2やlambdaなどを直接利用できるという利点がありますので、今回はEC2とS3を活用してCDN開発を行ってみたいと思います。
S3をCDNに見立ててカスタマイズ開発する方法
では、はじめにAWSCloud9で編集したプログラムファイルをkintoneに反映させるまでの流れを確認しましょう。
1. AWSCloud9およびEC2で利用するVPCとIAMを設定する
2. AWSCloud9の構築
3. S3にkintoneからアクセスする用のバケットを作成する
4. 3で作成したバケットをAWSCloud9から参照・編集ができるように設定する
5. プログラムを作成してkintoneのアプリに読み込ませて実行する
AWSの設定が多くなりますが、一度設定になれると次回以降が大変スムーズに行えるようになります。
それでは、上記の流れに沿って、実際に設定していってみましょう。
1. AWSCloud9およびEC2で利用するVPCとIAMを設定する
このステップでは、AWSCloud9とEC2で利用するVPCとIAMの設定を行います。
※今回はVPCとIAMの詳しい説明は省かせいただきます。
1-1 リージョンの選択
AWSCloud9は現在、以下のリージョンでのみ利用が可能となっています。
そのため、今回は対象リージョンに合わせて設定を行っていきます。
・米国東部 (バージニア北部)
・米国東部 (オハイオ)
・米国西部 (オレゴン)
・EU (アイルランド)
・アジアパシフィック (シンガポール)
1-2 VPCの作成
（１）まずウィザードに沿ってVPCを作成します。
※現在、AWSCloud9がconnecting状態で起動できないことが稀にあります。
明確な原因については明記されていませんが、専用のVPCに割り当てることで発生を抑えることができるといった事例もあるようですので、今回は専用のVPCを作成します。
（２）次はVPCの設定に以下の情報を入力します。
IPv4CIDR：10.0.0.0/16
IPv6CIDR:IPv6CIDRブロックなし
VPC名：（任意）
パブリックサブネットのIPv4：10.0.0.0/24
アベイラビリティーゾーン：指定なし
サブネット名：（任意）
これでVPCとサブネットの準備が完了しました。
1-3 IAMの作成
（１）サービスからIAMを選択して、ロール作成画面を表示する。
（２）このロールを利用するサービスの選択からEC2をクリックする
（３）アクセス権限設定画面にて、以下のポリシータイプを設定します。
・AmazonS3FullAccess（EC2からS3への全てのアクセスを許可します）
・AWSCloud9Administrator（AWSCloud9への管理者権限を設定します）
（４）任意のロール名を入力して、ロールの作成を行う。
2. AWSCloud9の構築
このステップでは、AWSCloud9を構築していきます。
2-1. 新規作成するので、[Create environment]をクリックします。
2-2. プロジェクト名と説明を入力後、[Next step]をクリックします。
2-3. AWSCloud9で利用するEC2を選択する。
（１）「Create a new instance for environment (EC2) 」を選択します
※AWSCloud9用に新しいEC2が作成されます
（２）「t2.micro (1 GiB RAM + 1 vCPU) 」を選択します
※一先ず、最低スペックで作成します
（３）先ほど作成した、AWSCloud9用のVPCとSubnetを選択します。
（４）設定した内容が問題なければ、「Create environment 」をクリックします
（５）EC2の立ち上げ後、AWSCloud9が表示されます。
この時点では、EC2に対して、IAMロールが設定されていないため、いったんEC2のインスタンス一覧を表示します。
（６）EC2のアクションからIAMロールの割り当てを選択します
（７）先ほど作成したIAMロールを設定します。
これで一先ず、AWSCloud9を利用できる準備が整いました。
次はS3の設定を実施します。
3. S3にkintoneからアクセスする用のバケットを作成します。
このバケットはkintoneからCDNとして利用するため、実際のソースが保存されます。
（１）「バケットを作成する」をクリックします。
（２）バケット名（任意）を入力します。
（３）AWSCloud9を利用しているリージョンを選択します。
（４）パブリックアクセス許可管理から、パブリックアクセスの許可を設定します。
（５）パブリックアクセスが許可されていることを確認します。
これで外部から対象のバケットが参照可能となりました。
次はAWSCloud9から参照できる様に設定していきたいと思います。
4. 先ほど作成したバケットをAWSCloud9から参照・編集ができるように設定する
このステップでは外部から参照できる様に設定した、S3のバケットをAWSCloud9のEC2から参照できる様に設定します。
4.1. S3をEC2にマウントするための準備
（１）AWSCloud9からEC2のターミナルに接続します。
（２）s3fsインストールするために必要なものを準備します。
※3fsとは、S3の領域をファイルシステムとしてEC2にマウントすることができる技術です。
必要なものは以下のコマンドから取得します。
$ sudo yum -y update $ sudo yum -y install automake $ sudo yum -y install gcc-c++ $ sudo yum -y install fuse $ sudo yum -y install fuse-devel $ sudo yum -y install libcurl-devel $ sudo yum -y install libxml2-devel $ sudo yum -y install openssl-devel
（３）s3fsをgitから取得します。
$ git clone https://github.com/s3fs-fuse/s3fs-fuse.git
（４）ダウンロードしたs3fsをEC2にインストールします。
$ cd s3fs-fuse $ ./autogen.sh $ ./configure --prefix=/usr/local $ make $ sudo make install
（５）S3をマウントする用のフォルダを作成します。
※今回は検証のためパーミッションをフルアクセスにしてありますが、ご利用の環境に合わせて設定を行なってください。
$ sudo mkdir /mnt/s3 $ sudo chmod 777 /mnt/s3
（６）s3fsをroot以外のユーザーも利用できる様に設定ファイルを変更します。
$ sudo vi /etc/fuse.conf
２行目の#を外してrootユーザー以外が利用できるようにします。（デフォルトでは＃がついていてrootのみ利用可能となっています）
# mount_max = 1000 user_allow_other
(７)設定が完了した、s3fsを利用してS3をEC2にマウントします。
ユーザーのuid及びgidを確認します。
＄ id ec2-user
s3fsを以下のコマンドで実行します。
＄ sudo /usr/local/bin/s3fs ＜S3のバケット名＞ /mnt/s3 -o rw,allow_other,uid=＜確認したuid＞,gid=＜確認したgid＞,default_acl=public-read,iam_role="＜作成したIAMロール＞"
。S3がマウントされていることを確認します。
＄ df -h
4.2. AWSCloud9からマウントされたS3ファイルを編集できる様に設定します
（１）S3のファイルをAWSCloud9のフォルダーにシンボリックリンク設定します。
＄ ln -s /mnt/s3 AWSCloud9デフォルトフォルダ/s3
（２）kintone用のJSファイルを作成します。
空のプログラムが追加されたことを確認します。
（３）S3にも作成したファイルが追加されていることを確認します。
5. プログラムを作成してkintoneのアプリに読み込ませて実行します
（１）kintoneアプリを作成します。
（２）S3に追加したファイルのリンクを取得します。
（３）kintoneのアプリにファイルのリンクを設定します。
（４）kintoneのアプリの設定を反映します。
まだプログラム自体が記述されていないため、何も実行されません。
（５）AWSCloud9で、対象のJSファイルに一覧表示した際に、アラートが表示されるプログラムを記述します。
(function($){
'use strict';
kintone.events.on(['app.record.index.show'],function(event) {
alert(‘一覧表示中’);
return event;
});
})();
（６）kintoneのアプリを再描画します。
アラートが表示されることを確認します。
（６）AWSCloud9でJSファイルを修正してみます。
アラートに表示される内容を変更します
kintoneのアプリに表示されるアラートも変更されています。
これでAWSCloud9を利用して、シームレスにkintone開発を行うことが可能になりました。
アクセス権などは、ご利用の環境に合わせて設定の必要がございます。
コラボレーティブなコード開発
AWSCloud9の機能として、同時に開発を行うことが可能です。
同時編集をした場合の動作も確認してみたいと思います。
（１）Shereボタンをクリックして設定画面を開きます
共有したいユーザー名を入力後、「Invite」をクリックして追加します。
ユーザーが追加されたら、Environmentに設定されているURLを共有してください。
対象のユーザーがIDEへアクセスすることができるようになります。
実際の動作を動画でみてみましょう。
所感・まとめ
今回はAWSCloud9とS3を利用して、シームレスにkintoneの開発を行う方法をみてきました。S3を利用した経緯としては、サーバー証明書を用意する必要がなかったことが理由となります。すぐにAWSCloud9でkintoneの開発を行いたい方、サーバ証明書や独自ドメインのEC2を利用していない場合など、こちらの方法であればすぐに開発を始めることが可能となります。また、すでに独自ドメインやサーバ証明書を発行されている方であれば、CloudFront＆EC2＆AWSCloud9で同じように開発を行うことが可能になります。また、AWSCloud9ではkintoneと相性のいいLambdaを開発＆デバックすることが可能になりますので、今まではそれぞれで開発を行なっていたものを、AWSCloud9だけで開発することが可能にもなります。サービス連携の開発なども捗るのではないでしょうか。
デメリットとしては、S3の使用料金とEC2使用料金が発生してしまいます。そのため、「kintoneのカスタマイズしか行わない」「開発も一人で行う」場合は、実際に行われているカスタマイズ方法をご利用いただいた方が、コスト的には抑えることができるかと思われます。
また、S3のURLは公開設定となってしまうため、URLに直接アクセスされるとファイルを閲覧されてしまう可能性があります。開発時のみ公開しておくことをオススメします。
チームでの開発や、組織内で共通のIDEを利用したい、共同編集などを実施したいチームでの開発などにオススメの構成なので、是非一度試してみてはいかがでしょうか。
