LoginSignup
1
0

More than 1 year has passed since last update.

Next.jsブログの開発環境構築

Last updated at Posted at 2022-12-01

Next.jsで0からブログ作成 Advent Calendar 2022 の2日目の記事です。
本記事をご覧いただき、ありがとうございます。
本当にギリギリのタイミングで書いています。
これを書いている数時間後にはワールドカップ 日本対スペイン戦です。
この記事を見てるころには、結果が出てると思うので、皆さん、いかがでしたでしょうか?

話が逸れてしましましたが、今回は環境構築についてです。

はじめに

私の使用している端末ですが、MacBook Air 2013年版を使用しています。
メモリも4GBしかなく、動作も遅く開発が満足にできる代物ではありません。
Next.jsで何かする程度であれば、VS Codeを使って、開発できるかと思います。

ただ、普段使いのiPadもあり、空き時間に開発できれば良いかなと考えています。
ですので、今回はブラウザで開発できるし、AWSのリソースと手軽に連携できるCloud9を使用したいと思います。

Cloud9 とは?

AWS Cloud9 は、ブラウザのみでコードを記述、実行、デバッグできるクラウドベースの統合開発環境 (IDE) です。これには、コードエディタ、デバッガー、ターミナルが含まれています。Cloud9 には、JavaScript、Python、PHP などの一般的なプログラム言語に不可欠なツールがあらかじめパッケージ化されているため、新しいプロジェクトを開始するためにファイルをインストールしたり、開発マシンを設定したりする必要はありません。Cloud9 IDE はクラウドベースのため、インターネットに接続されたマシンを使用して、オフィス、自宅、その他どこからでもプロジェクトに取り組むことができます。

公式より引用させていただきました。

普段から、主にiPadで利用しており、某コーヒーショップなどでコーディングしたりしています。

iPadの場合、タブの×で閉じる事ができないのと、
右クリックが効かない問題がありますが、工夫でなんとかなるレベルです。
ターミナルのCtr+Cも効きませんので、ターミナルを閉じて終了させてます。

構築してみた

AWSのコンソールからCloud9 を選択し、「Create environment」を選択します。
スクリーンショット 2022-12-01 23.06.36.png

詳細は以下のように入力しました。
スクリーンショット 2022-12-01 23.07.40.png
スクリーンショット 2022-12-01 23.07.49.png
スクリーンショット 2022-12-01 23.08.02.png

最後の「Create」ボタンの押下で環境作成が開始されます。(すぐ終わります。)

Timeoutは設定してください。
放置した場合、自動的にインスタンスを停止してくれます。
落とし忘れて課金されてしまった などの事故を防ぐことができます。

完了後、「Open」で起動することができます。
スクリーンショット 2022-12-01 23.08.25.png

Cloud9の画面
スクリーンショット 2022-12-01 23.09.21.png

おまけ

EC2として作成されているので、EC2の一覧から停止させることもできます。
スクリーンショット 2022-12-01 23.10.40.png

さいごに

今回で開発環境構築が終わりました。
次回は、プロジェクトの作成を行なっていこうと思います。

1
0
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
0