1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Day 24

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

Last updated at Posted at 2020-12-24

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

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はいるな~「 [こちら] (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

1
1
0

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
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?