React nest server

ReactとNestでWebアプリケーションを作る2回目です。 最初からやりたい場合はナビゲーションから初回を開いてください。

今回はサーバサイドアプリケーションをNestで作成していきます。 ターミナルでmyreactappディレクトリに移動し、以下のコマンドを実行します。

npx @nestjs/cli new server

途中で、

Need to install the following packages:
  @nestjs/cli@9.1.5
Ok to proceed? (y)

のように聞かれるのでyキーを押しておきます。 その他にも聞かれますが、なにか聞かれたらEnterキーを押してください。

                          Thanks for installing Nest 🙏
                 Please consider donating to our open collective
                        to help us maintain this package.


               🍷  Donate: https://opencollective.com/nest

と表示されたら完成です。

myreactappから起動できるようにします。

myreactapp/package.jsonを以下のように修正します。

{
  "name": "myreactapp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
    ,"watch:client": "npm start --prefix front"
    ,"watch:server": "npm run start:dev --prefix server" (←この行を追加します)
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

追加したら、ターミナルでコマンドを実行します。

npm run watch:server

ブラウザで http://localhost:3000 にアクセスします。

Hello World!と表示されたら成功です。

またちょっといじってみます。

myreactapp/server/src/app.service.ts を以下のように変更します。

import { Injectable } from '@nestjs/common';

@Injectable()
export class AppService {
  getHello(): string {
    return 'Hello World! そして世界へ';// そして世界へ を'の前に追加しました。
  }
}

ブラウザで http://localhost:3000 にアクセスして、 Hello World! そして世界へと表示されたら成功です。 これでサーバアプリケーションを作成することができました！

次に、frontとserverをつなぎ合わせていきます。