Heroku에 전체 스택 NX 작업 공간 배포

NX Workspaces은 typescript 및 node.js monorepos에 대한 엔터프라이즈 수준 시작점을 스캐폴딩하기 위한 강력한 도구입니다. 이 게시물에서는 Heroku에 배포할 간단한 React & Express 앱을 스캐폴딩할 것입니다. 우리는 실을 패키지 관리자로 사용할 것입니다.

NX CLI를 사용하여 새로운 React & Express 앱 생성

터미널에서 다음 명령을 실행합니다.

yarn create nx-workspace --package-manager=yarn nx-fullstack     

또는 npm을 선호하는 경우

npx create nx-workspace nx-fullstack 

프로젝트 구성 정의

이 프롬프트가 표시됩니다. CLI 목록에서 react-express를 선택합니다. 응용 프로그램의 이름을 지정하십시오nx-fullstack. 스타일링 솔루션으로 styled-components를 선택합니다. NX Cloud에 가입하려면 선택하십시오. 이제 CLI가 프로젝트를 스캐폴딩합니다.

새로 생성된 앱을 로컬에서 실행

cd nx-fullstack 명령을 사용하여 새로 만든 폴더로 이동합니다. 폴더 실행 내부

yarn nx run-many --target=serve --projects=nx-fullstack,api --parallel=true

클라이언트nx-fullstack 및 백엔드api가 시작될 때까지 기다리십시오. 브라우저에서 http://localhost:4200으로 이동합니다. apps/nx-fullstack/src/app/app.tsx의 클라이언트 앱이 apps/api/src/main.ts의 백엔드와 통신하고 있는지 확인합니다. 브라우저에 텍스트Welcome to the api!가 표시되어야 합니다.

빌드된 후 빌드된 nx-fullstack 클라이언트를 제공하도록 apps/api/src/main.ts를 업데이트합니다.

import * as express from 'express';
import * as path from 'path';
import { Message } from '@nx-fullstack/api-interfaces';

const CLIENT_BUILD_PATH = path.join(__dirname, '../nx-fullstack');

const app = express();
app.use(express.static(CLIENT_BUILD_PATH));

const greeting: Message = { message: 'Welcome to api!' };

app.get('/api', (req, res) => {
  res.send(greeting);
});

app.get('*', (request, response) => {
  response.sendFile(path.join(CLIENT_BUILD_PATH, 'index.html'));
});

const port = process.env.PORT || 3333;
const server = app.listen(port, () => {
  console.log('Listening at http://localhost:' + port + '/api');
});
server.on('error', console.error);

package.json에서 빌드 스크립트를 업데이트하고 git에 커밋합니다.

"build": "yarn nx run-many --target=build --projects=nx-fullstack,api --parallel=true"

package.json에서 시작 스크립트를 업데이트하고 git에 커밋합니다.

"start": "node dist/apps/api/main.js"

Heroku에 앱 배포

free account at Heroku here에 가입하세요. 터미널에서 아래 명령을 실행하여 Heroku CLI를 설치합니다.

brew tap heroku/brew && brew install heroku

heroku 로그인 명령 실행

heroku login

Heroku는 브라우저에서 자신을 인증하도록 요청합니다.

완료되면 터미널로 돌아갈 수 있습니다. 이제 로그인되었습니다.

Heroku 배포 대상 만들기

Heroku 계정에서 새 배포 대상을 생성하기 위해 CLI 명령을 실행합니다.

heroku create

완료되면 이런 모습이 됩니다.

프로젝트 루트의 Procfile

프로젝트의 루트에 Procfile를 생성하고 다음을 추가합니다.

web: yarn start

Heroku에 코드 배포

저장소의 모든 변경 사항이 커밋되었는지 확인하십시오. 그런 다음 실행

git push heroku master

배포된 풀스택 앱 방문

아래의 CLI 명령을 사용하여 기본 브라우저에서 배포된 앱을 엽니다.

heroku open

짜잔!

전체 스택 NX Workspace 앱은 now deployed and running on Heroku 입니다.

최종 코드

최종 배포된 코드can be found here .

다음에 어디로 갈까요?

Egghead.io에는 NX WorskpacesScale React Development with Nx의 너트와 볼트에 대한 훌륭한free 과정이 있습니다.