始めに
少し前に、職務経歴書を GitLab Pages で公開してみたという記事を書きました。今回は、Angular CLI で作成したプロジェクトを GitLab Pages を使って公開してみたいと思います。
環境
- Node.js: v10.16.0
- Angular: 8.2.14
作業
ひな型のアプリケーションを作成する
$ ng new portfolio --routing --style css
名前はお任せします。（私は、ポートフォリオの公開先として利用しようと思ったので、portfolio という名前にしています。）
GitLab CI/CD 用の設定ファイルを作成する
プロジェクトルートに以下のファイルを作成します。
gitlab-ci.yml
image:node:10cache:paths:-node_modules/before_script:-apt-get update-npm install -g @angular/cli@8.3.26build:stage:buildscript:-npm install-ng build --prod --base-href=/portfolio/cache:paths:-dist/portfoliopages:stage:deployscript:-mkdir public-mv dist/portfolio/* public/cache:paths:-dist/portfoliopolicy:pullartifacts:paths:-publicexpire_in:1 weekonly:-masterリポジトリに push する
$ git push origin master
動作の確認
独自ドメインを適用しない場合は、https://<ユーザ名>.gitlab.io/<リポジトリ名>で公開されます。
私の場合は、https://s.kawamura.gitlab.io/portfolioとなります。
OK！