NestとReactを使った簡易版twitterの作成-環境構築編
環境構築編は下記の構成になってます。
1.環境構築
2.使用方法
3.開発の進め方
4.知っておくと良いコマンド
5.読んで欲しい記事
5.最後に
環境構築
今回の課題はdockerを使って、仮想環境を構築して行います。macOSやWindowsでは、アプリケーション開発の手順が違いますので、それを避けるため仮想環境でOS違いを吸収します。
環境構築とかdockerとかは初めての人にとっては正直難しいと思うので、わからなかったらどうぞ質問してください。
開発するエディタはVS Codeを推奨します。ここからダウンロードすることができます。
dockerをインストールする
必要なファイルを準備
- 以下のリンクから環境構築に使うファイルをダウンロードする
- https://github.com/takumi12311123/for-spring-training
- 右の方にある緑色の Clone or download ボタンから ZIP を選択
2. zip ファイルをデスクトップに移動
3. zipファイルを展開する
使用方法
起動
$ cd
$ cd Desktop
$ cd for-spring-training-main
3. Dockerコンテナ起動( $は入力しなくて良い )
$ docker-compose up
注意 初回はかなり時間がかかるので,下記のログが出力されるまではしばらく待機
Nest application successfully started
停止
docker-compose up コマンドを実行したウィンドウで Ctrl + c で停止
動作確認
- 起動中にhttp://localhost:3000にアクセス
- 下記の画面が表示されれば完了
開発の進め方
主にbackend/とfrontend/のディレクトリの中にファイルを追加して開発を進めていきます。
バックエンドの開発からするようにして下さい。
知っておくと良いコマンド
cd #作業ディレクトリ移動
ls #作業ディレクトリ内のファイル確認
pwd #現在のディレクトリのパスを表示
mkdir #ディレクトリ作成
touch #ファイルの作成
docker ps #dockrコンテナの一覧を表示するためのコマンド
docker images #dockrイメージの一覧を表示するためのコマンド
docker rm [コンテナID] #コンテナを削除するためのコマンド
docker rmi [イメージID] #イメージを削除するためのコマンド
docker compose up #docker-compose.ymlの構成を全て起動するためのコマンド
docker logs [オプション] container #コンテナに保存されたログを調べるコマンド
読んで欲しい記事
-
僕もできてませんがわかりやすくコードは書きましょう
https://wayasblog.com/readable-code/ -
新卒研修資料まとめ(めちゃくちゃ有能リポジトリ)
https://gist.github.com/gcchaan/02f4746a323acac4095c30e0783a3912
最後に
環境構築編お疲れ様です!
わからないところはありませんでしたか?質問は随時Slackで受け付けているので気兼ねなく質問して下さい。
次はバックエンド編です。バックエンド編は長いですが、根気強く頑張って下さい!!