Laravelを入門書で一通り勉強し終えたので、実際にWebアプリケーションを作ってみたいと思っていました。そんな中で見つけた良さげなチュートリアルがこちら↓

【入門Laravelチュートリアル】https://www.hypertextcandy.com/laravel-tutorial-introduction/

このチュートリアルではLaravelのバージョンが現時点で最新の6.0に対応していないため、私は著者の電子書籍を購入させていただきました。上のリンクからいけると思います。

このチュートリアルでは環境構築にCloud9を使用しており、デフォルトのIDEで開発をしていました。現在の業務や勉強ではVSCodeを使っていて、ショートカットキーなど使い慣れているものを使用したいと思い調べてみました。以下参考にさせていただいた記事やブログです。参考は感謝の意味を込め先に書きます。笑ありがとうございました。

目次

参考AWS側の設定ユーザへの権限を設定グループの作成ユーザの作成Cloud9の設定VSCode側の設定拡張機能のインストール拡張機能の設定実際に編集してみる

参考

・「VScodeでAWS Cloud9の操作」https://qiita.com/funabashi800/items/de7d33989d0d2030148c・「VSCodeとAws Cloud9を連動させる」

AWS側の設定

早速Cloud9が立ち上げっていることを前提で記述します。

くるくる

ユーザへの権限を設定

グループの作成

Cloud9の設定からではなく、「サービス」から「IAM」へ移動します。

次に「グループ」を選択、そして「新しいグループを作成」を押下し任意のグループ名を設定します。入力が完了したら「次のステップ」へどうぞ。

こちらで、グループに許可する権限を選んでいきます。今回は、「AmazonEC2FullAccess」「AWSCloud9Administrator」の二つです。チェックしたら「グループを作成」していきましょう。

ユーザの作成

次に、グループに追加するユーザを作成します。「ユーザ」タブを押下し、「ユーザを追加」してください。アクセスの種類の「プログラムによるアクセス」と「AWSマネジメントコンソールへのアクセス」にチェックします。

次のステップでは、先ほど作成したグループにチェックをします。次のステップのタグの追加は不要です。

ユーザ作成後に表示される、「アクセスキーID」と「シークレットアクセスキー」は保持しておいてください。後で使用します。

これでユーザの作成は完了です。

Cloud9の設定

AWS側の設定はこれで最後になります。この処理を行わない場合下記のようなエラーが起きます。最初ここでつまづいたのでしっかり設定を行なってください！

User： arn:aws:im:: ~ :user/user名 is not authorized to perform:
cloud9:CreateEnvironmentToken on resource: ~ with an explicit deny

Cloud9にアクセスできるユーザに、先ほど作成したユーザを追加します。Cloud9のIDEを開き、右上の「SHARE」を押下してください。

次に、下部にある「Invite Members」に先ほど作成したユーザ名を入力します。「R」or「RW」は、「Read」or「Read and Write」で、参照のみか、参照編集させるかを決めています。参照のみにしていると、こんなエラーになります。

権限を選択したら「Done」でAWSの側の設定は終了です。

VSCode側の設定

拡張機能のインストール

【Live Sync for AWS Cloud9】https://marketplace.visualstudio.com/items?itemName=iann0036.live-share-for-aws-cloud9

拡張機能の設定

[windows]Ctrl + Shift + P[mac]Command + Shift + P→「Cloud Sync: Setup」を選択。

1回目の入力ボックスには「アクセスキーID」を、2回目の入力ボックスには「シークレットアクセスキー」を入力します。3つ目の入力ボックスには「リージョン」を入力します。リージョンは、Cloud9のIDEを開いている時のURLに表示されています。

また、下記表からRegionNameを参照し、右列のリージョンの値を探していただいても大丈夫です。

左から、雲のなかに9があるアイコン（Cloud9）を選択し、ENVIRONMENTかた対象の環境を右クリックしてください。「Add to Workspace」をクリックしたら完了です！

実際に編集してみる

さて、設定も終わったのでVSCodeからREADMEを編集してみます。僕のヒーローアカデミアのオールマイトの言葉、

「君はヒーローになれる」を書いてみました。

すげえええ！ファイルの保存もせずにリアルタイムでCloud9側も更新されているではないか、、、

あんまりCloud9理解できていないのですが、ユーザを追加すれば複数ユーザで同じファイルをいじるといったことも簡単にできそうですね。

VSCode

Cloud9 IDE

以上でした。眠たい。気楽に肩の力を抜いて人生生きていきたいですよね。ラフにタフにいきましょう。

それでは聞いてください。NulbarichでNEW ERAhttps://www.youtube.com/watch?v=5pkBqmX2ymc