表現のないHerokuの上の角度
ほとんどの人は、角度バンドルを送信するExpressJSインスタンスを使用するように指示します.
たとえば、Googleからのいくつかの結果
なぜExpressJSを使用しない？
角度のバンドルに役立つノードインスタンスを展開するのは良い考えですか?
そうは思わない.
そのため、
解決策
静的なHTMLを提供するには、角の束のように、我々は使用することができますNginx
nginxを使用するには、角バンドルとnginxでDocker画像を構築します.
Dockerfileを作成する
プロジェクトのルートで、このコンテンツでDockerFileという名前のファイルを作成します.
⚠️ このファイルでは、パッケージの名前の値を使用してappappnameを置き換えます.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というファイルを作成します.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;
}
}
クリエイト.dockignoreファイル
あなたが適切に物事をしたいなら😎, ファイル名を作成できます.プロジェクトのルートでDockIdignore.
ファイルにリストされたファイルとディレクトリは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マジックを待ちます.
Reference
この問題について(表現のないHerokuの上の角度), 我々は、より多くの情報をここで見つけました https://dev.to/damienmarchand/angular-on-heroku-without-expressjs-2k8oテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol