Last week I spent some time trying to deploy a SPA on Gitlab. It took me a few hours because the documentation even if complete was not that easy to read. (at least for me)
The following steps are mostly taken from this guide
- Create an account in Gitlab (or use an existing one)
- Create a new git project to host your web site
- Pull the projet
- add a public folder at the root of this project. This is the folder that will be used to publish our SPA
- add a
.gitlab-ci.ymlfile at the root of this project. This file will instruct Gitlab CI/CD pipeline how to deploy our web site. - Copy the following content into that file:
image: alpine:latest
pages:
stage: deploy
script:
- mkdir test
- mv public/* test
- rm -rf public
- mkdir public
- mv test/* public
artifacts:
paths:
- public
only:
- master
- commit and push your project to GitLab. Since there's a
.gitlab-ci.ymlfile, it will trigger automatically a deploy job. - Check the deployment job in the CI/CD menu:
- go to Settings>Pages et voilà. Your page should be published at address https://username.gitlab.io/myproject
- go to Settings>Pages and click on new domain
- Enter fullchain pem certificate and private key pem (be sure that your pem is full : base + intermediates I lost some time figuring out why it wouldn't work)
- Validate
- Now SSL has been setup, in the Settings>Pages page click on the details button under the domains
- copy the DNS string and update your DNS accordingly.
- make some coffee, read some great articles about Fable and try to access your SPA using your secured domain address (https://mydomain.tld)
If the index.html links to failed files (for instance a missing bundle.js...) the deployment will fail. At least it appears that it checks the integrity of the web site from the index.html file. (need some more doc on that though)