I can't find any guide on how to deploy a Blazor web assembly app to GitLab Pages as a static site. Has anyone managed to do so for .NET 6?
I have created a sample web assembly Blazor client application:
https://gitlab.com/sunnyatticsoftware/sasw-community/sasw-editor
The steps to create this simple web assembly are:
Install .NET 6 SDK
Create repo and clone it (e.g: sasw-editor)
Create the solution with web assembly Blazor project
dotnet new gitignore
dotnet new blazorwasm --name Sasw.Editor.Web --output src/Sasw.Editor.Web --no-https
dotnet new sln
dotnet sln add src/Sasw.Editor.Web
Compile and run it
dotnet build
dotnet run --project src/Sasw.Editor.Web
That's a way to run the blazor app on the port defined at the launchsettings.json
Building...
info: Microsoft.Hosting.Lifetime[14]
Now listening on: http://localhost:5291
info: Microsoft.Hosting.Lifetime[0]
Application started. Press Ctrl+C to shut down.
info: Microsoft.Hosting.Lifetime[0]
Hosting environment: Development
info: Microsoft.Hosting.Lifetime[0]
Content root path: C:\src\sasw-editor\src\Sasw.Editor.Web
I stop it. It works fine when served with Kestrel.
Now, the process to publish a distribution folder would be like this
dotnet publish -c Release -o publish
All the artifacts and files are now under publish folder. So, in theory, I can serve those things with a simple web server. I install a basic web server tool called local-web-server (it requires NodeJs/npm but you can use any other web server)
npm install -g local-web-server
Now I navigate to the publish/wwwroot folder where my index.html is
And I start the web server there
ws
Listening on http://5CD013DP5L:8000, http://192.168.1.13:8000, http://127.0.0.1:8000, http://172.21.208.1:8000
If I open the browser on http://127.0.0.1:8000, or any other of the above url, I can see my Blazor wasm app working perfectly.
I want to host that very same publish folder in GitLab pages which, in theory, is capable of serving static files.
So I create a .gitlab-ci.yml to compile, publish and copy contents to the public folder of GitLab pages.
image: mcr.microsoft.com/dotnet/sdk:6.0
variables:
GIT_DEPTH: 1000
PUBLISH_OUTPUT_DIR: publish
stages:
- build
- test
- publish
- delivery
build:
stage: build
script:
- dotnet restore --no-cache --force
- dotnet build --configuration Release --no-restore
artifacts:
paths:
- test
expire_in: 8 hour
rules:
- if: $CI_COMMIT_TAG
when: never
- when: always
test:
stage: test
script: dotnet test --blame --configuration Release
allow_failure: false
rules:
- if: $CI_COMMIT_TAG
when: never
- exists:
- test/**/*Tests.csproj
publish:
stage: publish
script:
- dotnet publish -c Release -o $PUBLISH_OUTPUT_DIR
artifacts:
paths:
- $PUBLISH_OUTPUT_DIR/
expire_in: 8 hour
rules:
- if: $CI_COMMIT_TAG
when: never
- when: on_success
pages:
stage: delivery
script:
- cp -a $PUBLISH_OUTPUT_DIR/ public
artifacts:
paths:
- public
only:
- main
The pipeline completes successfully. I can see the exact same structure I had locally within publish folder, this time under public folder in GitLab
But it fails to render the app
https://sunnyatticsoftware.gitlab.io/-/sasw-community/sasw-editor/-/jobs/1846501612/artifacts/public/wwwroot/index.html
shows
Loading...
An unhandled error has occurred. Reload 🗙
I can see it's attempting to access https://sunnyatticsoftware.gitlab.io/ or https://sunnyatticsoftware.gitlab.io/favicon.ico and returning 404
The favicon.ico would exist on https://sunnyatticsoftware.gitlab.io/-/sasw-community/sasw-editor/-/jobs/1846501612/artifacts/public/wwwroot/favicon.ico
so it must be some kind of URL re-write problem, right?
Any help would be much appreciated.
Always keep it at base href="/" and then in your ci change it to whatever you need. E.g. on gitlab you can use the CI_PROJECT_NAME variable.
pages:
stage: deploy
variables:
SED_COMMAND: 's#<base\shref="\/"\s?\/>#<base href="\/$CI_PROJECT_NAME\/" \/>#g'
script:
- cp -a $PUBLISH_OUTPUT_DIR/wwwroot public
- sed -r -i "$SED_COMMAND" public/index.html
artifacts:
paths:
- public
only:
- main
The solution is simply to use the following
pages:
stage: delivery
script:
- cp -a $PUBLISH_OUTPUT_DIR/wwwroot public
artifacts:
paths:
- public
only:
- main
and to use the <base href="/sasw-community/sasw-editor/" /> in index.html with the relative path.
I've recorded a quick tutorial on my Odysee channel https://odysee.com/#sunnyAtticSoftware:a/blazor-wasm-gitlab-pages:e
See https://gitlab.com/sunnyatticsoftware/training/blazorwasm-pages with a full sample
I still don't know of a good way to mix local development's base / relative path with prod base /sasw-community/sasw-editor/ and change it dynamically (is it even possible?)
But the problem is solved.
Related
I have a CI pipeline in Gitlab (relevant part only):
default:
image: docker:latest
variables:
DOCKER_APP_TAG: ${REGISTRY_URL}/${APP_NAME}:${CI_COMMIT_SHORT_SHA}
stages:
- build
.config:
only:
- branches
- merge_requests
- tags
except:
- triggers
tags:
- prod
build-app:
extends: .config
stage: build
script:
- docker build --target production -t ${DOCKER_APP_TAG} -f ${CI_PROJECT_DIR}/etc/node/Dockerfile .
When I build from a branch (i.e. push to main branch) everything works well. The docker build command is ran with the proper value available in S{DOCKER_APP_TAG}.
However after I create a TAG in GitLab (and a release), the build on this GitLab TAG fails at the docker build ... line complaining that the docker tag is not valid:
invalid argument "/:e5dc27fd" for "-t, --tag" flag: invalid reference format
The variables ${REGISTRY_URL} and ${APP_NAME} are not expanded. I have checked GitLab docs and the only limitations I see is if I was running in a service. But it is not the case.
What am I missing to expand properly the variables even with tag builds?
I'm trying to create a pipeline with a production and a development deployment. In both environments the application should be built with docker. But only when something changed in the according directory.
For example:
When something changed in the frontend directory the frontend should be build and deployed
When something changed in the backend directory the backend should be build and deployed
At first I didn't had the needs: keyword. The pipeline always executed the deploy_backend and deploy_frontend even when the build jobs were not executed.
Now I've added the needs: keyword, but Gitlab says yaml invalid when there was only a change in one directory. When there is a change in both directories the pipeline works fine. When there for exaple a change in the README.md outside the 2 directories the says yaml invalid as well.
Does anyone knows how I can create a pipeline that only runs when there is a change in a specified directory and only runs the according deploy job when the build job has ran?
gitlab-ci.yml:
stages:
- build
- deploy
build_frontend:
stage: build
only:
refs:
- master
- development
changes:
- frontend/*
script:
- cd frontend
- docker build -t frontend .
build_backend:
stage: build
only:
refs:
- master
- development
changes:
- backend/*
script:
- cd backend
- docker build -t backend .
deploy_frontend_dev:
stage: deploy
only:
refs:
- development
script:
- "echo deploy frontend"
needs: ["build_frontend"]
deploy_backend_dev:
stage: deploy
only:
refs:
- development
- pipeline
script:
- "echo deploy backend"
needs: ["build_backend"]
The problem here is that your deploy jobs require the previous build jobs to actually exist.
However, by using the only.changes-rule, they only exist if actually something changed within those directories.
So when only something in the frontend-folder changed, the build_backend-Job is not generated at all. But the deploy_backend_dev job still is and then misses it's dependency.
A quick fix would be to add the only.changes configuration also to the deployment-jobs like this:
deploy_frontend_dev:
stage: deploy
only:
refs:
- development
changes:
- frontend/*
script:
- "echo deploy frontend"
needs: ["build_frontend"]
deploy_backend_dev:
stage: deploy
only:
refs:
- development
- pipeline
changes:
- backend/*
script:
- "echo deploy backend"
needs: ["build_backend"]
This way, both jobs will only be created if the dependent build job is created as well and the yaml will not be invalid.
I can't caching node_modules for .NET core and angular project in gitlab ci script.
I have this message Skipping cache archiving due to empty cache key
here is my CI JOB
build_job:
stage: build
except:
refs:
- tags
tags:
- windows
script:
- dotnet restore .\$CI_PROJECT_NAME.sln
- dotnet build /p:Version=${env:VERSION} -c Release --no-restore /nr:false
artifacts:
name: "build-$CI_COMMIT_REF_NAME"
paths:
- '$CI_PROJECT_NAME/'
- '$CI_PROJECT_NAME.Tests/'
cache:
key: ${CI_COMMIT_REF_SLUG}-node
paths:
- './$CI_PROJECT_NAME/ClientApp/node_modules/'
I was having the same problem for my Windows runner with a C++ build. No matter what I set in my .config-ci.yml file I could not get my third party library builds cached.
In turns out the problem was that I did not have a cache_dir in the config.toml for my Gitlab runner settings. Once I set this, the simple cache settings in my .config-ci.yml file worked as desired.
Unfortunately the error is misleading as to which key in which configuration file is missing.
I can run the web application by using dotnet run on the .gitlab-ci.yml script.
stages:
- build
build:
stage: build
before_script:
- 'dotnet restore'
script:
- echo "Building the My Application"
- "dotnet publish Eitms.Decoder.sln -c release"
- "cd C:\\MyFolderContaints\\Eitms.Decoder.Backend"
- "dotnet run"
only:
- release
But how I can publish into the IIS? anyone can show the step?
Thanks
UPDATE
After view the script from HERE, still not success yet. Did I do something wrong here?
stages:
- build
- deploy
build:
stage: build
before_script:
- 'dotnet restore'
script:
- echo "Building the app"
- "dotnet publish Eitms.Decoder.sln -c release"
artifacts:
untracked: true
only:
- release
deploy_staging:
stage: deploy
script:
- echo "Deploy to IIS"
- "dotnet publish Eitms.Decoder.Backend\\Eitms.Decoder.Backend.csproj -c release -o C:\\Secret Path\\PRODUCTION\\Secret Project"
dependencies:
- build
only:
- release
I don't know is it still actual or not and also i never used GitLab CI
but looking on provided scripts i think you need just to copy (using CMD commands like xcopy) files into IIS folder after publish
like when you want to do same using CMD .bat file
Steps
publish project
stop appPool
copy files
start appPool
e.g (just for example)
dotnet publish "Eitms.Decoder.Backend\\Eitms.Decoder.Backend.csproj" -c release -o "C:\\Secret Path\\PRODUCTION\\Secret Project"
appcmd stop apppool /apppool.name:"Secret Project APP POOL"
xcopy "C:\\Secret Path\\PRODUCTION\\Secret Project" "C:\\inetpub\\wwwroot\\Secret Project" /s /e
appcmd start apppool /apppool.name:"Secret Project APP POOL"
I had the same requirement, and #Simon response helped me a lot. But when trying to apply it, I was confronted to some other problems that I have handled with an improved script
deploy_staging:
stage: deploy
script:
- 'dotnet publish WebProjectFolder\\WebProject.csproj -c release -o E:\\TemporaryLocation'
#I used powershell to stop the apppool.
#I also added a test to verify that the apppool is already Started. (If you try to stop a stopped apppool your job will fail)
- 'if ((Get-WebAppPoolState -Name pointeuse).Value -eq "Started") { Stop-WebAppPool -Name pointeuse }'
# I used /exclude so I doesn't copy config files (in my case it was web.config and appsettings.json)
# These config files already exists under my IIS because they contains specific configuration (So I copied them manually once because they do not change)
# deployignore.txt is a file that I added to the root of my solution (next to SolutionName.sln). It contains the config files that I don't want to copy (In my case it contains 2 lines web.config and appsettings.json)
# E:\\DeployLocation is the folder where your IIS site points to
- 'xcopy /s /e /y /exclude:deployignore.txt E:\\TemporaryLocation E:\\DeployLocation'
# Added the sleep because the app pool couldn't be started (maybe I can lower the sleep delay)
- sleep 10
- 'Start-WebAppPool -Name pointeuse'
only:
- master
Real thanks Simon.
Gitlab provides a .gitlab-ci.yml template for building and publishing images to its own registry (click "new file" in one of your project, select .gitlab-ci.yml and docker). The file looks like this and it works out of the box :)
# This file is a template, and might need editing before it works on your project.
# Official docker image.
image: docker:latest
services:
- docker:dind
before_script:
- docker login -u "$CI_REGISTRY_USER" -p "$CI_REGISTRY_PASSWORD" $CI_REGISTRY
build-master:
stage: build
script:
- docker build --pull -t "$CI_REGISTRY_IMAGE" .
- docker push "$CI_REGISTRY_IMAGE"
only:
- master
build:
stage: build
script:
- docker build --pull -t "$CI_REGISTRY_IMAGE:$CI_COMMIT_REF_SLUG" .
- docker push "$CI_REGISTRY_IMAGE:$CI_COMMIT_REF_SLUG"
except:
- master
But by default, this will publish to gitlab's registry. How can we publish to docker hub instead?
No need to change that .gitlab-ci.yml at all, we only need to add/replace the environment variables in project's pipeline settings.
1. Find the desired registry url
Using hub.docker.com won't work, you'll get the following error:
Error response from daemon: login attempt to https://hub.docker.com/v2/ failed with status: 404 Not Found
Default docker hub registry url can be found like this:
docker info | grep Registry
Registry: https://index.docker.io/v1/
index.docker.io is what I was looking for.
2. Set the environment variables in gitlab settings
I wanted to publish gableroux/unity3d images using gitlab-ci, here's what I used in Gitlab's project > Settings > CI/CD > Variables
CI_REGISTRY_USER=gableroux
CI_REGISTRY_PASSWORD=********
CI_REGISTRY=docker.io
CI_REGISTRY_IMAGE=index.docker.io/gableroux/unity3d
CI_REGISTRY_IMAGE is important to set.
It defaults to registry.gitlab.com/<username>/<project>
regsitry url needs to be updated so use index.docker.io/<username>/<project>
Since docker hub is the default registry when using docker, you can also use <username>/<project> instead. I personally prefer when it's verbose so I kept the full registry url.
This answer should also cover other registries, just update environment variables accordingly. 🙌
To expand on the GabLeRoux's answer,
I had issues on the pushing stage of the GitLab CI build:
denied: requested access to the resource is denied
By changing my CI_REGISTRY to docker.io (remove the index.) I was able to successfully push.