Help us understand the problem. What is going on with this article?

Visual Studio Code拡張機能「VSCode Twilio」の紹介

More than 1 year has passed since last update.

SendGridサポートエンジニアのキクタローです。今日はTwilioが出しているVisual Studio Codeの拡張機能「VSCode Twilio」について書きたいと思います。

VSCode Twilioとは?

Marketplaceの説明に「Deploy Twilio functions from VSCode.」とあるとおり、Twilioのサーバレス環境であるTwilio FunctionsをVSCodeで開発&デプロイするための拡張機能です。

2019-12-03_21h51_14.png

実体としては、Twilio Advent Calendar 2019初日の記事にある「Twilio CLI」をVSCodeのコマンドパレットから呼び出す拡張機能なので、自分はTwilioコマンドをバリバリに覚えているぜ~という方にはあまり必要ないかもしれません。(そんな人はまだいなさそうですが…

インストール手順

Windows 10 Pro (1903)の環境で確認しました。

以下の手順えインストールします。

  1. Twilio CLIのインストール
  2. Twilio Serverless Pluginのインストール
  3. VSCode Twilioをインストール

Twilio CLIのインストール

各OSごとのインストール方法はこちらをご確認ください。Windowsのところに「Node.jsのバージョン8以降」とありますが、細かくは「8.10.0」以降です。私の環境には「8.9.4」が入っていて、この次の「2. Twilio Serverless Pluginのインストール」でエラーが出ました。

Twilio CLIは以下のコマンドでインストールできます。

npm install twilio-cli -g

実行結果はこんな感じでした。

2019-12-03_21h24_44.png

Twilio Serverless Pluginのインストール

続いてTwilio Serverless Pluginです。さきほどインストールしたTwilio CLIのtwilioコマンドで以下を実行します。

twilio plugins:install @twilio-labs/plugin-serverless in your terminal.

前述のとおり、私の環境ではnode.jsのバージョンエラーがでました。

2019-12-03_21h27_24.png

そこで、8.9.4をアンインストールして、12.18.1をインストールしました。あとで知ったのですが、執筆時点のTwilio Functionsは8.10.0で動作しているらしいので、本番環境を想定する方はバージョンを意識したほうがよさそうです。

再度twilioコマンドを実行すると、今度はエラーは起きず、無事にインストールされました。

2019-12-03_21h34_44.png

VSCode Twilioのインストール

最後にVSCodeの拡張機能で「VSCode Twilio」を検索し、インストールします。

2019-12-03_21h20_05.png

環境設定は以上です。

コマンドパレットの確認

VSCodeのコマンドパレットを起動します。

2019-12-03_21h35_09.png

Twilioと入力して以下のコマンドが確認できればOKです。

2019-12-03_21h35_58.png

Twiilo Functionsのプロジェクト作成

コマンドの「Create Project」でTwilio Functionsのプロジェクトを作成してみます。コマンドを実行して保存先のフォルダを選んだら、プロジェクト名を入力します。ここでは「MyFirstTwilioProject」としました。

2019-12-03_21h36_32.png

Enterを押して、プロジェクト作成~と思ったらエラーになりました。VSCodeのデフォルトターミナルがPowerShellだったのですが、それだとこけるようです。。

2019-12-03_21h37_16.png

仕方がないので、コマンドパレットで「>Terminals」と打って既存のターミナルをコマンドプロンプトに戻しました。

2019-12-03_22h36_23.png

2019-12-03_22h36_33.png

で、再度プロジェクト作成を実行。今度はうまくいきましたが「No profile configred」というメッセージがでて、プロジェクトは作成されませんでした。

2019-12-03_21h40_49.png

Twilio CLIでプロファイルの割り当てをして、アカウントと紐づけておく必要があるそうです。以下のコマンドでプロファイルの作成をします。

twilio profiles:create

プロファイルに対する名前をいれて、あとはTwilioのSIDとAuth Tokenを入力するだけです。

2019-12-03_21h45_09.png

SIDとAuth TokenはTwilioの管理画面で取得できます。
https___qiita-image-store.s3.ap-northeast-1.amazonaws.com_0_47737_c49c33bd-2206-c19e-c93b-e227e9d258b3.jpg

これで再度プロジェクト作成を試みると…無事にプロジェクトが作成されました!

2019-12-03_21h52_51.png

この状態でコマンドパレットの「Start Local Server」を選ぶと、node.jsのサーバが起動します。

2019-12-03_22h45_05.png

アクセスポイントの一覧が表示されます。

2019-12-03_21h57_11.png

hello-worldにアクセスするとTwilioのSayを使った応答形式でレスポンスが返ってきました。

2019-12-03_21h56_58.png

デプロイはまだ試していませんが、とりあえずローカル環境でVSCode + Twilio Functionsの動作確認ができました。

kikutaro
デビュー当時から堀北真希さんを愛するエンジニアです。堀北さんの結婚を機に乃木坂46を愛するエンジニアに転身しました。Javaを中心としたエンプラ系システムの開発者でしたが、現在はSendGridのサポートエンジニアとして働いています。 http://kikutaro.tech/
http://kikutaro777.hatenablog.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away