search
LoginSignup
1
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

個人アプリ/サービス開発の進め方と運用、得た学び - 03【PR】 Lenovo Advent Calendar 2020 Day 24

posted at

updated at

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

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

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環境ができる。
image.png

これだと、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

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

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

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

日本語化

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

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. 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 プロジェクトを作成」の項を参照に作る。

1点。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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
1
Help us understand the problem. What are the problem?