angglar応用容器化配置


Intro
私は自分でホームページを作っていますが、効果はあまりよくないです。
最初から一つのanglarjsで作ったページから後にless動的書き込みcssを入れて、gulp自動化のlessファイルをcssファイルと自動化の圧縮jsとcssにコンパイルして、後に参加したvueとanglarに基づいて実現します。主なメンテナンスはanglarに基づいています。現在はanglarの個人ホームページはPWAをサポートしています。先日はdockerの展開のサポートを追加しました。文章を記録してみます。
dockerfileを作成します
完全なdockerfileは以下の通りです。

FROM node
# set working directory
WORKDIR /app

# install and cache app dependencies
COPY . /app

# install dependencies and build the angular app
RUN yarn && yarn run build

FROM nginx:stable-alpine

# copy from dist to nginx root dir
COPY --from=builder /app/dist/weihanli /usr/share/nginx/html

# expose port 80
EXPOSE 80

# set author info
LABEL maintainer="WeihanLi"

# run nginx in foreground
# https://stackoverflow.com/questions/18861300/how-to-run-nginx-within-a-docker-container-without-halting
CMD ["nginx", "-g", "daemon off;"]
全体のdockerfileは二つの部分に分けられます。第一部分はanglarアプリケーションをコンパイルして、最後に配置するファイルを生成します。
第二の部分は、生成された部分をnginxに基づく環境にコピーし、nginxに展開する。
包装dockerの鏡像docker build コマンドで、dockerのミラー画像を包装します。詳細コマンドはhttps://docs.docker.com/engine/reference/commandline/build/を参照してください。

docker build -t weihanli/homepage .
起動容器
docker run
docker runコマンドで容器を起動し、パッケージされたミラーを配置し、詳細コマンドはhttps://docs.docker.com/engine/reference/commandline/run/を参照してください。

docker run -p:5200:80 --rm --name homepage-demo weihanli/homepage
docker composedocker-compose.yml でコンテナを起動し、コマンドを起動します。docker-compose upもっとcompose情報はhttps://docs.docker.com/compose/compose-fileを参照してください。
docker-componese.ymlファイルは以下の通りです。

version: "3"
services:
 web:
  image: "weihanli/homepage"
  container_name: "weihanli-homepage-demo"
  ports:
    - "5200:80"
アクセスコンテナのアプリケーション
アクセスhttp://localhost:5200 を選択します。
More
プロジェクトソースコード:https://github.com/WeihanLi/weihanli.github.io
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。