ExpressJS 없이 Heroku에서 Angular

아름다운 Angular 프로젝트를 Heroku에 배포하려면 가장 먼저 해야 할 일은 Google을 사용하는 것입니다.

대부분의 사람들은 ExpressJS 인스턴스를 사용하여 Angular 번들을 보내라고 말할 것입니다.

예를 들어 Google의 일부 결과는 다음과 같습니다.

betterprogramming.pub

medium.com

itnext.io

stanislas.blog

ExpressJS를 사용하지 않는 이유는 무엇입니까?

Angular 번들을 제공하기 위해 노드 인스턴스를 배포하는 것이 좋은 생각입니까?
나는 그렇게 생각하지 않는다.

이는 이유:

코드 감소 === 문제 감소

웹 서버와 같은 정적 HTML을 제공하기 위한 도구가 있습니다

.

ExpressJS는 동적 웹 사이트 또는 API를 구축하도록 만들어졌습니다

.

ExpressJS는 많은 CPU를 사용하여 정적 파일을 제공합니다

.

다음은 정적 파일을 제공하기 위해 ExpressJS와 Nginx를 비교하는 Stackoverflow에 대한 설명입니다. link

해결책

Angular 번들과 같은 정적 HTML을 제공하려면 다음을 사용할 수 있습니다Nginx.
Nginx를 사용하기 위해 Angular 번들과 Nginx로 Docker 이미지를 빌드합니다.

Dockerfile 만들기

프로젝트의 루트에서 이 콘텐츠로 Dockerfile이라는 파일을 만듭니다.
⚠️ 파일에서 your_app_name을 package.json 파일의 이름 값으로 바꿉니다.

### STAGE 1:BUILD ###

FROM  node:16.13.2-alpine  AS  build

WORKDIR  /dist/src/app

RUN npm cache clean --force

COPY  .  .

RUN  npm  install

RUN  npm  run  build  --prod

FROM  nginx:latest  AS  ngi

COPY  --from=build  /dist/src/app/dist/your_app_name>/usr/share/nginx/html

COPY  /nginx.conf  /etc/nginx/conf.d/default.conf

CMD  sed  -i  -e  's/$PORT/'"$PORT"'/g'/etc/nginx/conf.d/default.conf  && nginx  -g  'daemon off;'

EXPOSE  $PORT

Nginx 구성 파일 생성

프로젝트의 루트에서 nginx.conf라는 파일을 만듭니다.

server {

    listen $PORT;

    sendfile on;

default_type application/octet-stream;

gzip on;

gzip_http_version 1.1;

    gzip_disable "MSIE [1-6].";

gzip_min_length 256;

gzip_vary on;

gzip_proxied expired no-cache no-store private auth;

gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;

gzip_comp_level 9;

    root /usr/share/nginx/html;

location / {

        try_files $uri $uri/ /index.html =404;

    }

}

.dockerignore 파일 만들기

일을 제대로 하고 싶다면 😎, 프로젝트의 루트에 .dockerignore라는 파일을 만들 수 있습니다.
파일에 나열된 파일 및 디렉터리는 Docker 이미지를 만들 때 복사되지 않습니다.
IDE 파일과 같이 프로젝트에 필요하지 않은 모든 파일을 추가할 수 있습니다.

.git

.editorconfig

/.vscode/*

/node_modules

/e2e

/docs

.gitignore

*.zip

.angular

.history

dist

앱의 스택을 컨테이너로 설정

다음은 스택에 대한 일부 설명서입니다. link
Heroku client이 있는 터미널에서 다음을 실행합니다.

heroku stack:set container -a your_heroku_app_name

그리고?

프로젝트를 Heroku(또는 Heroku에 연결된 다른 git 호스팅 서비스)에 푸시하고 Docker 매직이 작동할 때까지 기다립니다.