NestとReactを使った簡易版twitterの作成-環境構築編

# NestとReactを使った簡易版twitterの作成-環境構築編
環境構築編は下記の構成になってます。

[1.環境構築](#環境構築)
[2.使用方法](#使用方法)
[3.開発の進め方](#開発の進め方)
[4.知っておくと良いコマンド](#知っておくと良いコマンド)
[5.読んで欲しい記事](#読んで欲しい記事)
[5.最後に](#最後に)

# 環境構築

今回の課題はdockerを使って、仮想環境を構築して行います。macOSやWindowsでは、アプリケーション開発の手順が違いますので、それを避けるため仮想環境でOS違いを吸収します。

環境構築とかdockerとかは初めての人にとっては正直難しいと思うので、わからなかったらどうぞ質問してください。

開発するエディタはVS Codeを推奨します。ここからダウンロードすることができます。

https://azure.microsoft.com/ja-jp/products/visual-studio-code/

## dockerをインストールする
* [Macの場合](https://github.com/KuroiCc/myjlab_spring_training_2022/blob/main/text/docker_install/macOS.md)
* [Windowsの場合](https://github.com/KuroiCc/myjlab_spring_training_2022/blob/main/text/docker_install/windows.md)

## 必要なファイルを準備

1. 以下のリンクから環境構築に使うファイルをダウンロードする
 * https://github.com/takumi12311123/for-spring-training
 * 右の方にある緑色の Clone or download ボタンから ZIP を選択
 ![ファイルのダウンロード.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2983787/1006526e-9563-b719-2f7c-10df5f4ab0d4.png)

&ensp;2.&nbsp;zip ファイルをデスクトップに移動

&ensp;3.&nbsp;zipファイルを展開する

# 使用方法
## 起動
1. docker desktop を開き、起動させておく。
![docker desktop.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2983787/45d7f6c9-05cd-860b-773b-e8dc404103e8.png)

2. ターミナルでダウンロードしたファイルがある場所に移動( $は入力しなくて良い )

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

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

~~~
$ docker-compose up
~~~

:::note warn
注意 初回はかなり時間がかかるので，下記のログが出力されるまではしばらく待機
:::
~~~
Nest application successfully started
~~~
 ![初回ログ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2983787/705d8d70-574d-b151-1e4f-461d9afdd5b8.png)

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

## 動作確認
1. 起動中に[http://localhost:3000](http://localhost:3000)にアクセス
2. 下記の画面が表示されれば完了
![localhost.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2983787/eca5ecf2-461f-5b53-ed3b-a6fd1da7a74d.png)


# 開発の進め方
主にbackend/とfrontend/のディレクトリの中にファイルを追加して開発を進めていきます。

https://qiita.com/toshiki19/items/ea4db21f2e19ebff6a22

https://qiita.com/toshiki19/items/9b47e629bc36a4cc37b9

:::note warn
バックエンドの開発からするようにして下さい。
:::

# 知っておくと良いコマンド

~~~linux　コマンド
cd  #作業ディレクトリ移動
ls  #作業ディレクトリ内のファイル確認
pwd #現在のディレクトリのパスを表示
mkdir #ディレクトリ作成
touch #ファイルの作成
~~~

~~~dockerコマンド
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://wayasblog.com/readable-code/)

* 新卒研修資料まとめ(めちゃくちゃ有能リポジトリ)
[https://gist.github.com/gcchaan/02f4746a323acac4095c30e0783a3912](https://gist.github.com/gcchaan/02f4746a323acac4095c30e0783a3912)

# 最後に
環境構築編お疲れ様です！
わからないところはありませんでしたか？質問は随時Slackで受け付けているので気兼ねなく質問して下さい。

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

* 環境構築編：[NestとReactを使った簡易版twitterの作成-環境構築編](https://qiita.com/toshiki19/items/f6ee7a1738aec6522430)
* バックエンド編：[NestとReactを使った簡易版twitterの作成-バックエンド編](https://qiita.com/toshiki19/items/ea4db21f2e19ebff6a22)
* フロントエンド編：[NestとReactを使った簡易版twitterの作成-フロントエンド編](https://qiita.com/toshiki19/items/9b47e629bc36a4cc37b9)