AWS - ローカルCloud9 + Amplify + Vue.js + Java11を使ったサーバレス環境構築を悩んでやったぜ

事前に知っておいた方がよいこと

• Windowsから、WSLのファイルにアクセスする方法（\\wsl$でアクセス可能) (参考ページ：https://qiita.com/quzq/items/1096c638c0d86795be13)

IDEの選定

Cloud9 on Windows Desktop

良いなと思ったのは、AWSに密な開発ができるからというのが理由。
スピード開発では、最後のハードルとして、ローカルから、AWSへのデプロイした後、
想定外のことが乱発すること。

↓も参考になります。
https://tech.drecom.co.jp/ac2020-cloud9-personal-development/

とりあえず構築してみる

ローカルデバッグできないと何かと不都合なので、
・Windows10のローカル環境に神IDEこと『Cloud9』を構築したら幸せになりました！
・cloud9をwindowsにインストールして、幸せになる
の優良な記事を参考にローカルCloud9環境を構築。
※Amplifyを使いたいので、それが実現しやすい環境をと。
※Cloud9自体の有効活用は、【これからプログラミング&クラウドを始める人向け】AWS Cloud9 を利用して Ruby の開発環境を作ってみる② - AWS Cloud9 の環境構築を参考にするとよさそう。

WSLのインストール

何はともあれ、WSLをWindowsに入れる。
Ubuntuのアカウントは、初回起動時に作成される（名前とパスワード入れる。Sudoできるユーザが作られる）
Ubuntuは最新のものでOKだと思うけど、この時点ではUbuntu 20.04。
その他の情報：
・python2.7
・node:v10.19.0(npm:v6.14.4)

Proxyの設定

この作業をしている環境は、Proxy配下ので、ProxyをUbuntuに各種設定

Bashにプロキシを設定

[Ubuntu]

・BashにProxy適用（※この時、「@」などがパスワードに含まれていたら、エスケープを忘れず。）
echo -e "\n## proxy setting"  >> ~/.bashrc
echo 'export http_proxy="http://user:passowrd@proxy_server:port/"' >> ~/.bashrc
echo 'export https_proxy=$http_proxy' >> ~/.bashrc
source ~/.bashrc

aptの設定

[Ubuntu]

sudo nano /etc/apt/apt.conf

/etc/apt/apt.conf

Acquire::http::Proxy "http://user:password@proxy_server:port";
Acquire::https::Proxy "http://user:password@proxy_server:port";

アップデート・アップグレード必要なものを入れる。

[Ubuntu]

$ sudo apt update
$ sudo apt upgrade
$ sudo apt install gcc make python2.7 nodejs npm git　// たぶん、何回かやり直さないとうまくいかない

gitの設定(ここがポイント。http://　はつけないで定義する）

[Ubuntu]

git config --global http.proxy user:password@proxy_server:port
git config --global https.proxy user:password@proxy_server:port
git config --global https.proxy user:password@proxy_server:port
git config --global url."https://".insteadOf git://

※参考ページだと、git://～になっているが、以下を参考にする。

[Ubuntu]

$ git clone https://github.com/c9/core.git c9sdk
$ cd c9sdk
$ scripts/install-sdk.sh

これで、Success!と出ればOK。（結構時間かかります）
※途中で手順を間違えたりすると、うまくインストールができなくなったりする。
　そうなったら、環境がかなり汚れているので、Ubuntuをいったんアンインストールしてやり直すことを推奨。

nodeサーバ起動

[Ubuntu]

node server.js

この状態で「 http://localhost:8181/ide.html 」
にアクセスすると、ローカル版のCloud9環境ができる。

これだと、c9sdk自体がワークスペースになってしまうので、
以下のページを参考に、workspaceを切り替え。
https://qiita.com/naniwaKun/items/b7b45a6e6ed33ce81eb9

[Ubuntu]

$ cd ~
$ sudo mv c9sdk /opt/
$ mkdir workspace
$ echo " /usr/bin/node /opt/c9sdk/server.js -l 127.0.0.1 -w /home/？？？/workspace" > cloud9
？？？は自分のユーザー名
$ sudo mv cloud9 /usr/local/bin/
$ sudo chmod 755 /usr/local/bin/cloud9

これでＯＫ。あとは毎回起動のためのコマンドを打つのは面倒なので、
以下の内容のバッチを作成。

[cloud9.bat]

C:\Windows\System32\bash.exe -c /usr/local/bin/cloud9 -D

これでOK。このバッチをスタートアップにでも入れておけば、Windows起動時に上がる。
（別に手動でいいと思うけど。）

日本語化

Cloud9は英語版なので、英語が不得手な方も多いかと思いますが、そこはご安心を。
ブラウザなのでChromeで開ければ、「日本語化」できちゃいます。
便利～

javaインストール

Javaが使いたいので、UbuntuにOpenjdkをインストール(LambdaがJava11をサポートしているようなので、互換性のある11で）
https://qiita.com/charon/items/af0f0de2ae9adbc03bfe
※めちゃくちゃ時間がかかる。ここで30分くらい足止め食らう。Visual Studio Codeにしようかなと思い始める。。
　ただ、Front/Backの構成と、それをデプロイするときの手間を考えると、
　Cloud9を使いたい。
　かといって、サーバー越しのブラウザだと、いろいろやりづらいだろうか？
　ローカルでもブラウザIDEは使いづらいだろうか？という勝手な思慮により、
　巡り巡っていったんローカルCloud9で進めた。

と、ローカルでCloud9が使えるなら、EC2インスタンスのお金がかからないので、
いったんこれで進む。

Amplify + Vue.jsの環境をサクっと作ってみる。

・AWS Amplify と Vue.js を使って、基本的な認証と CRUD 操作ができる Web アプリケーションを作る
こちらにお世話になってみる。

ちなみに、「 [https://future-architect.github.io/articles/20201013/] 」

Cloud9の環境はローカルに構築したのでスキップ。

リポジトリのクローンと、必須CLIのインストール

[Cloud9のコンソール]

1. １セットをgitからもらう
git clone https://github.com/matsuihidetoshi/vueamplifydev.git

2. Vue CLIをインストール
npm i -g @vue/cli //sudoつけないとパーミッションで怒られるかも。

3. Amplify をプロジェクトに導入
npm i -g @aws-amplify/cli //こちらもsudo必要かも。

※　sudo chmod 755 /usr/local/ --R した方が楽かな。

Vueプロジェクトの作成

ここは、[https://aws.amazon.com/jp/builders-flash/202008/amplify-crud-app/] のページの、
「Vue.js プロジェクトを作成」の項を参照に作る。

１点。package managerを選択する必要が出るので、yarn/npmを選ぶ。
今のところyarnのほうが早い・依存関係の解決が強いのでyarnを選択

なぜyarnを選ぶのかは、こちら

[Cloud9のコンソール]

Vue CLI v4.5.9
? Please pick a preset: Default ([Vue 2] babel, eslint)
? Pick the package manager to use when installing dependencies: 
❯ Use Yarn 
  Use NPM 

あと、先々、UnitTestもしたいので、featureについては以下のようにした。

[Cloud9のコンソール]

Vue CLI v4.5.9
? Check the features needed for your project: 
 ◉ Choose Vue version
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◯ Router
 ◉ Vuex
❯◉ CSS Pre-processors
 ◉ Linter / Formatter
 ◉ Unit Testing
 ◉ E2E Testing

// ついで、Vue.jsのバージョン。
// さすがに最近出たばかりの、3.xは怖いので、安定板の2.xを選択。
//(キャプチャ取り忘れました。。）

//つぎに、CSS pre-prrosessorは、これから伸びるdart-sassを選択
Vue CLI v4.5.9
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
❯ Sass/SCSS (with dart-sass) 
  Sass/SCSS (with node-sass) 
  Less 
  Stylus 

//linterはデフォ
? Pick a linter / formatter config: (Use arrow keys)
❯ ESLint with error prevention only 
  ESLint + Airbnb config 
  ESLint + Standard config 
  ESLint + Prettier 

//lintタイミングもデフォ
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◉ Lint on save
 ◯ Lint and fix on commit

//テストソリューションは、、、とりあえずJestかな。
? Pick a unit testing solution: 
  Mocha + Chai 
❯ Jest 

//E2Eは、オートスナップショットが有効な、Cypress。（今回はChromeしか使わない予定なので）
❯ Cypress (Chrome only) 
  Nightwatch (WebDriver-based) 
  WebdriverIO (WebDriver/DevTools based) 

//Configファイルは、デフォ
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
❯ In dedicated config files 
  In package.json 

//このあと、次回以降の作成時に、この設定を流用するか聞かれるので、yでもnでも好きな方を。

※Routerはさすがに要らなかな。
※Babelはいるな～「 こちら 」を参照
※Typescriptも、まぁいらないかな。。
※PWAも不要（モバイルを相手にしないので）
※テストソリューションについては、
　ちょっと知らないけど、Vue TestUtilsも確認が必要そう
　https://www.reddit.com/r/vuejs/comments/8myjfs/testing_jest_or_mocha/
　テスト構成考える前に、熟読予定。書くなら別記事にします。
※E2Eは、選択に当たっては「 https://qiita.com/os1ma/items/5429cd8e12ac43a6a803 」を参照した感じ。
　魅力的～というだけ。実際のプロジェクトで使えるかは微妙。

Amplifyのセットアップ

https://aws.amazon.com/jp/builders-flash/202008/amplify-crud-app/
の「AWS Amplify の初期設定」、「Vue.js プロジェクトを Amplify プロジェクトとして初期化」に倣って実施

※途中でIAMユーザを作る必要あり

※ここまででいったん終了。続きは、後日。。

考慮事

Amplifyを使うに当たっては、以下のページの記事を検討してみた。
・Separation of Concern