経緯
会社の勉強会でreactを使ったプロジェクトがあります
会社(Windows10)と家(Windows7)とモバイル用PC(Mac)の環境が全部ちがうので同期をとるのがめんどくさくなった。
package.jsonをコピーすれば動くだけど
Windowsとmacで微妙にいれるパッケージがちがっていた
特にsass！！
windowsだとpython2が入っていないと動かないとか！！
環境依存する所から脱出するためにCloud9を試してみた
前提
・AWSのアカウントをもっているとする
もしもっていない人は下記の記事を参考にする
https://qiita.com/d778980/items/115753d604025f2feec2
Cloud9とは
特徴
簡単にいうとWEB上でプログラム開発できる環境（IDE）です
しかも開発環境だけど外からアクセスできるURLが発行されます
アプリから見えないとかそういう問題はない！！
１日２時間程度なら200円程度で運用できます。コーヒーを我慢すればOKのレベルです
30分間アクセスがない場合はCloud9を停止する事もできます
セットアップ
Cloud9を起動
AWSWのコンソールを開いて「Cloud9」を入力または開発者用ツールの「Cloud9」を選択する
プロジェクト作成
プロジェクト作成ボタンを押す
プロジェクトの名前の設定と詳細内容
プロジェクトの名前とプロジェクトの詳細を入力します
この内容はいつでも環境設定で変更できます
環境タイプ
SSHでもよかったけど、EC2の方が楽そうなのでEC2を選択した
SSHは設定がコマンドベースで設定しないといけないっぽい
詳しく調べたい人は以下のURLを参考にする
https://docs.aws.amazon.com/Cloud9/latest/user-guide/create-environment.html?icmpid=docs_ac9_console
コスト節約の設定
何もしない場合にEC2を落とす設定です
もちろん３０分を設定した
もう少し小さくしてほしいものだ
IAMの役割
AWSServiceRoleForAWSCloud9がデフォルトで設定されていたので
そちらを使用することにした
共同で開発することになったら細かく設定した方がいいかも
ネットワークの役割
ネットワークは他のEC2であったのでそのネットワーク（VPC）を選択した
もしかして作った事がない人は作らないといけないかもしれない
サブネットは
No preference（優先するものない）を選択した
preview(確認画面)
確認画面が表示されるのでそちらで問題なければ
Create environmentのボタンを押す
確認画面ではベストプラクティスが表示されていたができていません
・ソース管理を使用し、環境を頻繁にバックアップします。AWS Cloud9は自動バックアップを実行しません。
・ご使用の環境でソフトウェアの定期的な更新を実行します。AWS Cloud9は、あなたの代わりに自動アップデートを実行しません。
・AWSアカウントでAWS CloudTrailを有効にして、環境内のアクティビティを追跡します。もっと詳しく知る
・信頼できるユーザーとだけ環境を共有してください。環境を共有すると、AWSのアクセス資格情報が危険にさらされる可能性があります。
当たり前ですがCLIでも作れます
https://docs.aws.amazon.com/cli/latest/reference/Cloud9/create-environment-ec2.html
作成ボタンを押すと起動中になる
起動後の画面
セットアップ後の作業
reactを使っているのでnode.jsなどセットアップをします
node.jsのバージョンアップ
v6がはいっているみたいなので
2018/04/16の時点でのLTSのV8.9.4をインストールする
ターミナルは画面したに表示されている部分です
もしない場合は上のメニューのWindowsの「New Terminal」を選択する
nvm install 8.9.4
使用するバージョンを切り替え
nvm use 8.9.4
バージョンを確認
node -v npm -v
最後にデフォルトのNodeJSバージョン8.9.4にする
nvm alias default 8.9.4
hello worldのテスト
npm i -g create-react-app #自分はexpressと同居させるので・・・ create-react-app clientview ec2-user:~/environment $ create-react-app client Creating a new React app in /home/ec2-user/environment/client. Installing packages. This might take a couple of minutes. Installing react, react-dom, and react-scripts... > uglifyjs-webpack-plugin@0.4.6 postinstall /home/ec2-user/environment/client/node_modules/uglifyjs-webpack-plugin > node lib/post_install.js Aborting installation. npm install --save --save-exact --loglevel error react react-dom react-scripts has failed. Deleting generated file... node_modules Deleting generated file... npm-debug.log Deleting generated file... package.json Deleting client / from /home/ec2-user/environment Done.
工ｴｴｪｪ(´д｀)ｪｪｴｴ工
失敗した・・・
ローカルでcreate-react-appしたモジュールをアップして
npm installすると成功した
原因がよくわからない・・・・ヾ(｡>﹏<｡)ﾉﾞ✧*。
npm start Compiled successfully! You can now view clientview in the browser. Local: http://localhost:8080/ On Your Network: http://172.31.XX.XX:8080/ Note that the development build is not optimized. To create a production build, use npm run build.
「preview」のメニューの「preview runninng application」をを選択する
ソースの隣に表示される
当たり前だけどソースを更新したらプレビュー画面も更新されます
トラブルシューティング
reactをインストールしてnpm startしたらCloud9がフリーズした。
どうしても原因がわからずどうしょうもなかったので
ec2から再起動したらなおった。大人数でやる場合はEC2のサイズを変更した方がいいのかな
