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ファイルを展開する

使用方法

起動

docker desktop を開き、起動させておく。
ターミナルでダウンロードしたファイルがある場所に移動( $は入力しなくて良い )

$ cd 
$ cd Desktop
$ cd for-spring-training-main

3. Dockerコンテナ起動( $は入力しなくて良い )

$ docker-compose up

注意初回はかなり時間がかかるので，下記のログが出力されるまではしばらく待機

Nest application successfully started

停止

docker-compose up コマンドを実行したウィンドウで Ctrl + c で停止

動作確認

開発の進め方

主に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で受け付けているので気兼ねなく質問して下さい。

次はバックエンド編です。バックエンド編は長いですが、根気強く頑張って下さい！！

環境構築編：NestとReactを使った簡易版twitterの作成-環境構築編
バックエンド編：NestとReactを使った簡易版twitterの作成-バックエンド編
フロントエンド編：NestとReactを使った簡易版twitterの作成-フロントエンド編