サーバーレスWebアプリを開発するためのCloud9環境構築

この記事はサーバーレスWebアプリ Mosaicを開発して得た知見を振り返り定着させるためのハンズオン記事の1つです。

##イントロダクション
Cloud9で開発してまして、なので、その環境構築からはじめます。
VueのWebアプリ、Lambda用のPython(3.6)、などを開発・ビルドできるようにします。

コンテンツ

AWS Cloud9 環境の新規作成

AWSマネジメントコンソール > AWS Cloud9

• Create environmentボタンを押下。
  • Step1 : Name environment
    Name : 適当な名前を設定する。
  • Step2
    Environment Type : EC2を選択。
    Instance Type : t2.microで充分。
    Platform : Amazon Linux
    Cost-saving setting : After 30 minutes(default)
  • Step3
    ReviewをチェックしてCreate environmentボタンを押下
    

Vue CLI 3のインストール

$ npm install -g @vue/cli@3.11.0
$ vue --version
@vue/cli 3.11.0

@3.11.0を指定しないと最新版が入ります。
2019年12月中旬現在、リリースされたばかりの4が入りました。
4でも問題ないと思いますが、今回はハンズオンということで、念の為バージョンを指定してインストールします。

Vue CLI 3によるプロジェクトの作成は別記事としました。

cloneしてきたプロジェクトをビルドするために

Vue CLIで作成したプロジェクトをクローンしてもってきてビルドしようとすると、以下のようなエラーとなりました。

$ npm run build

> sample_vue_project@0.1.0 build /home/ec2-user/environment/sample_vue_project
> vue-cli-service build

sh: vue-cli-service: command not found
npm ERR! code ELIFECYCLE
npm ERR! syscall spawn
npm ERR! file sh
npm ERR! errno ENOENT
npm ERR! sample_vue_project@0.1.0 build: `vue-cli-service build`
npm ERR! spawn ENOENT
npm ERR! 
npm ERR! Failed at the sample_vue_project@0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/ec2-user/.npm/_logs/2020-01-01T02_04_19_354Z-debug.log

これを解決するためには、以下のコマンドを実行してください。

$ rm -rf node_modules package-lock.json && npm install

Python 3.6のセットアップ

2019年10月頃、Cloud9の標準インストール済みPythonのバージョンは2.7でした。
Python2のサポート終了が2020年1月に迫っているということで、2.7から3.6に変更する手順について書こうと思っていたのですが。2019年12月中旬現在、すでにCloud9の標準インストール済みPythonのバージョンが3.6.8になっていました。
ありがとうございます。助かります。

と、思いきや、pipの参照Pythonが2.7のままですね、、。何ででしょうか、、。罠でしょうか、、。
以下のように3.7を参照するよう変更しておきましょう。

$ pip --version
pip 9.0.3 from /usr/lib/python2.7/dist-packages (python 2.7)
$ sudo update-alternatives --config python

There are 2 programs which provide 'python'.

  Selection    Command
-----------------------------------------------
*+ 1           /usr/bin/python2.7
   2           /usr/bin/python3.6

Enter to keep the current selection[+], or type selection number: 2
$ pip --version
pip 9.0.3 from /usr/lib/python3.6/dist-packages (python 3.6)

あとがき

ワタシのプライベート開発環境ですが、メモリ4GBのChromebook(5万円)と、t2.microのCloud9となっています。
決して快適な環境ではないのですが、これはある意味で縛りというか、制約というか、不自由を楽しんでいるというか、まぁそんな感じです。

しかしCloud9はいいですね。
すぐに開発を始められるし、インターネットとWebブラウザがあればどこからでもどのPCからでもアクセスできる。

ハンズオンの環境はCloud9で決まりですね。