kintoneのカスタマイズ効率をあげよう – Cloud9編

はじめに

最近はkintoneのプラグインと合わせてLambdaを利用することが増えてきました。その際にLinux環境が必要になり、Cloud9を利用しました。今回は記事「kintoneのカスタマイズ効率をあげよう」をCloud9で実現する方法を紹介します。

コードのフォーマット

デフォルトではPrettierが動作しないので動作するようにします。「Ctrl + ,」で設定ファイルを開きます。

まずは「Code Formatters > JSBeautify settings」の設定です。
「Format Code on Save」をOFFにします。
「Use JSBeautify for JavaScript」をOFFにします。

次は「JavaScript Support」の設定です。
「Format Code on Save」をONにします。
「Use Built-in JSBeautify as Code Formatter」をOFFにします。
「Custom Code Formatter」に「npx prettier -w “$file”」と入力します。

必要があれば「TypeScript Support」も設定しておきましょう。

これで保存時にPrettierが動作するようになります。

local-web-serverの利用

「npm run ws」で起動したWebサーバーにアクセスできるようにします。

customize-uploaderやkintoneプラグインのmanifest.jsonに設定するにはプロトコルがhttpsである必要があります。しかし、httpsでSSL証明書なしだとAWSのWebサーバーにはアクセスできません。そのため、まずはSSL証明書を作ります。

mkcertをインストールします。

$ sudo yum install nss-tools
$ brew install mkcert

SSL証明書を作成します。

$ mkcert -key-file ../key.pem -cert-file ../cert.pem localhost

以下のWarningは無視して大丈夫です。
Warning: the local CA is not installed in the system trust store! ⚠️
Warning: the local CA is not installed in the Firefox and/or Chrome/Chromium trust store! ⚠️
Run “mkcert -install” to avoid verification errors ‼

Cloud9環境のパブリックIPアドレスを確認します。このIPアドレスはWebサーバーへのアクセスに利用します。

$ curl http://169.254.169.254/latest/meta-data/public-ipv4

次にWebサーバーがSSL証明書を利用するようにpackage.jsonを編集します。ついでにSSL証明書の作成とIPアドレスの確認コマンドも登録しておきます。

  "scripts": {
    "ws": "ws --https --cert ../cert.pem --key ../key.pem",
    "mkcert": "mkcert -key-file ../key.pem -cert-file ../cert.pem localhost",
    "ip": "curl http://169.254.169.254/latest/meta-data/public-ipv4",
  }

Webサーバーを起動します。

$ npm run ws
（略）
Listening on https://ip-172-31-6-xxx.ap-northeast-1.compute.internal:8000, https://127.0.0.1:8000, https://172.31.6.xxx:8000

起動するとパブリックIPアドレスではなくプライベートIPアドレスをListeningします。
これで問題ありません。

ポート8000へのアクセスを許可するために、Cloud9のEC2インスタンスが利用しているセキュリティグループのインバウンドルールを編集します。

「https://メモしたIPアドレス:8000/」にアクセスできるか確認します。あとは必要なファイルをcustomize-uploaderのmanifest.jsonに設定すれば完了です。

以下の画面が表示される場合は左下の詳細設定からアクセスできます。