0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

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

Last updated at Posted at 2023-02-25

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

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

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

環境構築

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

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

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

dockerをインストールする

必要なファイルを準備

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

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

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

使用方法

起動

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

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

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

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

$ docker-compose up

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

Nest application successfully started

初回ログ.png

停止

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

動作確認

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

開発の進め方

主に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 #コンテナに保存されたログを調べるコマンド

読んで欲しい記事

最後に

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

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

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

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?