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

環境構築編は下記の構成になってます。

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

環境構築

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

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

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

dockerをインストールする

• Macの場合
• Windowsの場合

必要なファイルを準備

1. 以下のリンクから環境構築に使うファイルをダウンロードする

• https://github.com/takumi12311123/for-spring-training
• 右の方にある緑色の Clone or download ボタンから ZIP を選択
  

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

 3. zipファイルを展開する

使用方法

起動

1. docker desktop を開き、起動させておく。
   

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

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

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

$ docker-compose up

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

Nest application successfully started

停止

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

動作確認

1. 起動中にhttp://localhost:3000にアクセス
2. 下記の画面が表示されれば完了
   

開発の進め方

主に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の作成-フロントエンド編