事前に知っておいた方がよいこと
- 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にプロキシを設定
・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の設定
sudo nano /etc/apt/apt.conf
Acquire::http::Proxy "http://user:password@proxy_server:port";
Acquire::https::Proxy "http://user:password@proxy_server:port";
アップデート・アップグレード必要なものを入れる。
$ sudo apt update
$ sudo apt upgrade
$ sudo apt install gcc make python2.7 nodejs npm git // たぶん、何回かやり直さないとうまくいかない
gitの設定(ここがポイント。http:// はつけないで定義する）
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://～になっているが、以下を参考にする。
$ git clone https://github.com/c9/core.git c9sdk
$ cd c9sdk
$ scripts/install-sdk.sh
これで、Success!と出ればOK。（結構時間かかります）
※途中で手順を間違えたりすると、うまくインストールができなくなったりする。
そうなったら、環境がかなり汚れているので、Ubuntuをいったんアンインストールしてやり直すことを推奨。
nodeサーバ起動
node server.js
この状態で「 http://localhost:8181/ide.html 」
にアクセスすると、ローカル版のCloud9環境ができる。
これだと、c9sdk自体がワークスペースになってしまうので、
以下のページを参考に、workspaceを切り替え。
https://qiita.com/naniwaKun/items/b7b45a6e6ed33ce81eb9
$ 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
これでＯＫ。あとは毎回起動のためのコマンドを打つのは面倒なので、
以下の内容のバッチを作成。
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のインストール
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を選ぶのかは、こちら
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については以下のようにした。
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はいるな～「 [こちら] (https://qiita.com/Shagamii/items/a87181c22ea777ee2acc) 」を参照
※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