[MERN] React+Express

5137 ワード

作成したフロントエンドhtmlをサーバに送信して実行する方法.
1. node.jsがインストールされていると仮定するとexpressをインストールできます.(npm i express)
新しい
  • 12.1サーバフォルダを作成し、端末からサーバフォルダに移動し、npm init(npm初期化)後、npm i expressを使用してexpressをインストールします.
  • 1.2 express.jsを検索し、hello worldをコピーする方法でindexを確立します.jsファイルを作成して貼り付けます.
  • 2.サーバー側にHello Worldを表示する
    const express = require('express') // express 불러오기
    const app = express() // app이라는 새로운 express 생성
    const port = 3000 // 연결할 port number
    
    app.get('/', (req, res) => {
      res.send('Hello World!')
    })
    // get 함수는 첫번째 인자로 url을 가지고, 두번째 인자로는 req,res 즉 요청,응답을 가진다.
    // /(root url)에 접속했을 때 res(응답)으로 send 함수를 이용해 'Hello World!'라는 텍스트를 보낸것.
    
    app.listen(port, () => {
      console.log(`Example app listening on port ${port}`)
    })
    // 모든 요청을 감지해야 그 요청에 응답이 가능하기 때문에 app(express)함수에 listen함수를 사용
    // 첫번째 인자로 port를 가지고 두번째 인자로는 실행할 함수를 가진다.
    // 5000번의 port number로 들어오는 모든 요청을 listen하며, 정상적으로 listen가능하다면 console에 Example app listening on port 5000 을 띄운다.
    3.Buildファイルの作成
  • 3.1フロントで作成されたインデックス.htmlをサーバ側に直接送信すると、フロントエンドとサーバは接着されません.
  • 93.2したがって作成されたhtml+jsファイルはindexにコンパイルされる.htmlと静的ファイルを作成する必要があります(構築されたindex.htmlは、すべての静的jsファイルがインポートされたファイルです).
  • 3.3端末では、npm i run-script buildを使用してフロントエンドコンテンツが自動的に生成されます.
  • 4.生成されたファイルをサーバに送信し、画面上にサスペンションする
    const path = require('path');
    // 폴더나 파일을 서버단으로 보낼때는 현재경로+상대경로를 합쳐서 인자로 줘야하는데 path를 통해 쉽게 현재경로와 상대경로를 붙힐 수 있다.
    // npm i path 후 path를 import
    
    app.use(express.static(path.join(__dirname, "../client/build")));
    // use함수를 통해 어떤 폴더를 static폴더로 사용할것인지 지정해줘야 한다.
    // express.static을 통해 static폴더를 지정하고 함수 안의 내용에 path.join 함수를 통해 현재경로와 상대경로를 붙혀준다.
    // 현재경로는 __dirname, 두번째 인자인 상대경로는 build 폴더로 지정해주면 된다.