React 애플리케이션을 노드에 버트합니다.Mongodb에 연결된 js 백엔드

안녕하십니까, 사랑하는 프로그래머님, 저의 마지막 과학 기술 문장을 읽은 것을 환영합니다.js와 Docker.좋아했으면 좋겠어!

질문:

이제 Docker를 이 시리즈의 이전 글에서 Node와 Mongo와 함께 사용하는 방법에 대해 알아봤습니다.MERN 스택 애플리케이션을 완성하려면 프런트엔드 섹션을 추가해야 합니다.우리의 예에서 앞부분은 React를 사용하여 실현될 것이다.전단, 후단, 데이터베이스를 갖춘 완전한 작업 응용 프로그램을 만들고 Docker에서 모든 내용을 실행하는 법을 배워봅시다!

1. 백엔드 노드를 복제합니다.js

이전 절에서 우리는 노드를 만들었다.js 응용 프로그램은 Mongodb와 Docker를 사용합니다.본 강좌에 대해 우리는 같은 항목을 필요로 할 것이다.클론 source code from here 또는 다음 명령을 실행합니다.

git clone https://github.com/vguleaev/Express-Mongo-Docker-tutorial.git

클론이 완료되면 폴더의 이름이 test-mongo-app에서 api으로 변경됩니다.이것은 우리의 백엔드가 될 것이다.
모든 것이 정상적인지 확인하려면 api 폴더를 열고 npm install을 실행하십시오.의존항을 설치한 후, 모든 것이 정상인지 검사합시다.🍾

docker-compose up

이 명령은 Mongo 이미지를 가져오고 Mongodb에 연결된express 서버를 시작하는 데 docker-compose.yml을 사용합니다.
만일 모든 것이 정상이라면, 콘솔에서 다음과 같은 내용을 보아야 합니다.

web_1    | Listening on 8080
web_1    | MongoDb connected

브라우저에서 이 노드 http://localhost:8080/users을 열면 빈 그룹이 응답할 것입니다.이것은 정확합니다. 왜냐하면 우리의 데이터베이스는 현재 완전히 비어 있기 때문입니다.

2. React 애플리케이션 작성

우리의 앞부분을 개발할 때가 되었다.부모 디렉토리로 이동하여 실행하려면 다음과 같이 하십시오.

npm i create-react-app -g
create-react-app ui

이제 폴더 구조가 다음과 같아야 합니다.
...
├──/응용 프로그램 프로그래밍 인터페이스
└──/사용자 인터페이스
(여기서 api는 복제된 백엔드 프로그램이고 ui는 새로 만든 React 프로그램입니다.)
모든 것이 정상적인지 확인하기 위해서 ui 폴더를 열고 React 프로그램을 시작합니다.

cd ui
npm start

너는 http://localhost:3000에서 기본적인 React 응용 프로그램을 보아야 한다.🎈

3. Dockerize React 애플리케이션

ui 폴더에 .dockeringore 파일을 만듭니다.

node_modules
.git
.gitignore

(이 파일이 없으면 docker build 명령은 Windows에만 적용됩니다.)
ui 폴더에 Dockerfile 파일을 만듭니다.

FROM node:8
# Create app directory
WORKDIR /usr/src/app
# Install app dependencies
COPY package*.json ./

RUN npm install --silent
# Copy app source code
COPY . .

#Expose port and start application
EXPOSE 3000
CMD ["npm", "start"]

docker에서 React의 역할을 테스트해 봅시다.우선, 우리는 라벨react:app:

docker build -t react:app .

이제 태그 이미지를 실행하고 docker에 대해 동일한 포트를 사용합니다.

docker run -p 3000:3000 react:app

http://localhost:3000을 열면 Docker가 제공하는 반응을 볼 수 있습니다.👍
⚠️ 일반적으로 Ctrl+C를 사용하는 것처럼 닫으면 컨테이너가 중지되지 않습니다.용기 운행 정지 dodocker ps 명령.

CONTAINER ID        IMAGE               COMMAND                  CREATED             STATUS              PORTS                    NAMES
06c982ce6ae9        react:app           "docker-entrypoint.s…"   12 days ago         Up About a minute   0.0.0.0:3000->3000/tcp   strange_montalcini

그리고 필요한 id를 선택하고 용기를 정지합니다.

docker stop 06c982ce6ae9

4. React 응용 프로그램에서 api 호출

ui 폴더를 열고 axios 설치

cd ui
npm i axios

App 구성 요소는 버튼을 사용하여 사용자를 만들고 사용자 ID 목록을 표시하도록 변경되었습니다.Nodejs 응용 프로그램 호출/사용자 작성 및/사용자를 통해 엔드포인트를 가져옵니다.
응용 프로그램에 붙여넣습니다.js 파일:

import React, { Component } from 'react';
import logo from './logo.svg';
import axios from 'axios';
import './App.css';

const apiUrl = `http://localhost:8080`;

class App extends Component {
  state = {
    users: []
  };

  async createUser() {
    await axios.get(apiUrl + '/user-create');
    this.loadUsers();
  }

  async loadUsers() {
    const res = await axios.get(apiUrl + '/users');
    this.setState({
      users: res.data
    });
  }

  componentDidMount() {
    this.loadUsers();
  }

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <button onClick={() => this.createUser()}>Create User</button>
          <p>Users list:</p>
          <ul>
            {this.state.users.map(user => (
              <li key={user._id}>id: {user._id}</li>
            ))}
          </ul>
        </header>
      </div>
    );
  }
}

export default App;

포트 3000에서 프런트엔드를 실행하지만 포트 8080에서 백엔드를 실행하면 CORS 문제가 발생합니다.이런 상황을 피하려면api 프로젝트로 돌아가서cors 패키지를 설치하십시오.

npm i cors

그런 다음 server.js 파일에서 사용합니다.

const express = require('express');
const app = express();
const connectDb = require('./src/connection');
const User = require('./src/User.model');
const cors = require('cors');

app.use(cors());
// ...

5. Docker에서 React 및 Node 실행

마지막 걸음!현재 디렉터리api에서 docker-compose.yml을 삭제하고 루트 폴더에 docker-compose.yml을 만듭니다.붙여넣기

version: '2'
services:
  ui:
    build: ./ui
    ports:
      - '3000:3000'
    depends_on:
      - api
  api:
    build: ./api
    ports:
      - '8080:8080'
    depends_on:
      - mongo
  mongo:
    image: mongo
    ports:
      - '27017:27017'

이제 루트 폴더 구조가 다음과 같습니다.
...
├──/응용 프로그램 프로그래밍 인터페이스
├──/사용자 인터페이스
└── docker 작성.yml
docker compose가 있습니다. 이것은 우리가 docker에서 실행하고자 하는 서비스를 설명합니다.우리의 예에서 우리는 ui,api,mongo 세 가지 서비스가 있다.🐋
모든 서비스에 대해 항목마다 Dockerfile을 사용하여 docker 이미지를 만들 것입니다.line build에서 경로를 지정합니다.(예: build: ./ui)
mongo에 대해 이미지를 구축하는 항목이 없습니다. 왜냐하면 docker hub의 미리 정의된 이미지를 사용하기 때문입니다.(예: image: mongo)
포트와 의존항도 지정합니다.우리의 예에서, 우선api는mongo에 의존하기 때문에 포트 27017에서mongo를 시작합니다.두 번째 용기는 포트 8080에 있는api입니다. ui가 그것에 의존하기 때문입니다.마지막 용기는 포트 3000에서 시작하는 ui입니다.
마지막으로 루트 폴더에서 명령으로 모든 서비스를 실행합니다!🧙

docker-compose up --build

http://localhost:3000/을 열고 버튼을 클릭하여 사용자를 만듭니다.개발자 도구를 열고 호출을 봅니다.지금 우리는 docker에서 전단과 후단을 실행합니다!

6. React 프로덕션 구축 사용

현재 개발자 서버로 React 프로그램을 시작합니다. 이것은 우리가 생산에서 사용하고자 하는 것이 아닐 수도 있습니다.하지만 우리는 이 문제를 쉽게 해결할 수 있다.
ui 프로젝트에서 Dockerfile만 변경하면 됩니다.우리는 생산 구축을 시작하고nginx 서버를 사용하여 서비스를 제공할 것이다.모든 컨텐트를 다음과 같이 바꿉니다.

# build environment
FROM node:12.2.0-alpine as build
WORKDIR /app
ENV PATH /app/node_modules/.bin:$PATH
COPY package.json /app/package.json
RUN npm install --silent
RUN npm install [email protected] -g --silent
COPY . /app
RUN npm run build

# production environment
FROM nginx:1.16.0-alpine
COPY --from=build /app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

포트 80이 공개되었으므로 3000에서 80으로 변경해야 합니다.

  ui:
    build: ./ui
    ports:
      - '80:80'
    depends_on:
      - api

magic 명령을 다시 실행하여 docker의 모든 프로그램을 시작합니다🔮

docker-compose up --build

http://localhost/을 열면 똑같은 작업 프로그램을 볼 수 있지만, 현재 React가 생산 모드에서 실행 중입니다.
source code here 참조.즐겨라!
React, Nodejs, Mongodb를 성공적으로 연결한 것을 축하합니다!🎉🎉🎉
🚀 만약 그 문장에서 재미있는 것을 읽었다면, 나의 더 많은 댓글을 좋아하고 주목해 주십시오.사랑하는 프로그래머 고마워요!😏