I have a repo which attempts to serve an index.html file using
the NPM serve module in a GitHub action.
Here's what the action looks like (.github/workflows/deploy.yml):
name: test-serve-deploy
on: [push]
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- name: Check out repository code
uses: actions/checkout#v3
- run: echo "Clone complete"
- name: install
run: |
npm install
- name: serve
run: |
npm run serve
- run: echo "Status ${{ job.status }}"
I understand that the content in my repo is just an index.html file and could be served statically with GitHub Pages, but this is just a test repo I'm using to understand how GitHub actions work.
When the action runs, it predictably hangs on the npm run serve:
However, this URL returns a 404: http://jonbri.github.io/test-serve:3000
I'm sure I'm missing something fundamental about how these actions/runners work.
My goal is to have the GitHub repo not only deploy but also serve a Node.js app.
What steps would I need to take to get this working?
Github runners are ephemeral. They just run the commands you provide and exit.
They cannot serve pages. If you want to serve content, you might want to use your github runner to deploy your content to a provider such as netlify or aws s3, lambda etc.
Related
I've got a simple Vue SPA that builds and can be served without problem locally, but when I try and build and deploy via GitHub Actions to an Azure App Service, it just results in the ':( Application Error' page when launching.
Below is the pretty much default workflow .yml, the app service configuration, and the error log from trying to build the app.
I assume the files are built from the /dist folder at /home/site/wwwroot, where node_modules are installed and package.json is generated.. but it doesn't seem like it is (there are no files when checking wwwroot, so build failed?)
Any help would be appreciated, I've been stuck on this for a whole day and will happily provide more info. I've also deployed the NodeJS backend to an app service without too much hassle, so I'm familiar with the process -- just can't get this frontend up!
name: Build and deploy Node.js app to Azure Web App - shelf-library
on:
push:
branches:
- main
workflow_dispatch:
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout#v2
- name: Set up Node.js version
uses: actions/setup-node#v1
with:
node-version: '16.x'
- name: npm install, build, and test
run: |
npm install
npm run build --if-present
- name: Upload artifact for deployment job
uses: actions/upload-artifact#v2
with:
name: node-app
path: dist/
deploy:
runs-on: ubuntu-latest
needs: build
environment:
name: 'Production'
url: ${{ steps.deploy-to-webapp.outputs.webapp-url }}
steps:
- name: Download artifact from build job
uses: actions/download-artifact#v2
with:
name: node-app
- name: 'Deploy to Azure Web App'
id: deploy-to-webapp
uses: azure/webapps-deploy#v2
with:
app-name: 'shelf-library'
slot-name: 'Production'
publish-profile: ${{ secrets.AZUREAPPSERVICE_PUBLISHPROFILE_11D7C84BF0CE47B68181C49B9ED47D19 }}
package: .
Check the below steps to create VueJS and deploy to Azure App Service using Git Hub Actions.
Thanks #Anthony Salemo for the clear steps.
In Command prompt, run the below command to create a Vue App.
vue create myvueapp
Navigate to the root directory of the application cd myvueapp and run
yarn serve
or
npm run serve
Run npm run build command for production build.dist folder will be created.
Push the application to GitHub Repository.
You can check the code available in my GitHub Repository.
My GitHub folder structure
Create an Azure App service
Navigate to your App Service =>Deployment Center and select the code repo from your GitHub.
Initially I got the below content page when I tried to access the App.
Add the Startup Command in Configuration => General Settings.
pm2 serve /home/site/wwwroot/dist --spa --no-daemon
Initially even I got the same Application Error.
In Git Hub I can see the build and deploy action is not yet completed.
Wait for the build to deploy successfully.
My deployed folder structure in KUDU Console
Now Iam able to access the Application without any issues.
I saw you are running your stages with different agents, so I suppose that your issue could be resulted from that the configuration in the build stage agent could not be inherited into the deploy stage agent.
So you could test to add the npm task to install the vue-cli-service module in your deploy agent again.
==========================================================
Updated on 12/22
I suppose that in deploy stage, you could add the npm and node installation with below.
- name: Set up Node.js version
uses: actions/setup-node#v1
with:
node-version: '16.x'
- name: npm install, build, and test
run: |
npm install
npm run build --if-present
- name: npm install, build, and test
run: |
npm install -g #vue/cli#latest
npm i -g #vue/cli-service-global
echo '<template><h1>Hello!</h1></template>' > App.vue
vue serve
I have added a homepage, predeploy and deploy properties to my package.json file, linked my app to my github and ran npm run deploy. The terminal indicates success, then when I go to my Gitpages URL I get the following: https://joe-dp.github.io/mh-app/
Does anyone have any ideas why the link is redirecting me to a React information page?
Under Repo → Settings → Pages → Sources, and select the gh-pages branch
Put your built application (e.g. dist) at the root of the gh-pages branch to be served up
You'll probably want to automate this, which can be done quite easily with GitHub Actions.
The following example, uses JamesIves/github-pages-deploy-action, to build an deploy your app every time a change is made on your main branch.
Just create a file in .github/workflows/deploy-gh-pages.yml in your main branch, then populate it with:
name: Build and Deploy to GH Pages
on:
push:
workflow_dispatch:
permissions:
contents: write
jobs:
build-and-deploy:
concurrency: ci-${{ github.ref }}
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout#v3
- name: Install and Build
run: |
yarn
yarn build
- name: Deploy
uses: JamesIves/github-pages-deploy-action#v4.3.3
with:
branch: gh-pages
folder: dist
Commit your files, the action will run automatically, and a few minutes later your app will be live on GH Pages 🚀
If you'd like to see a real-world example of this, I'm doing something similar in this project.
I am creating a GitHub Actions workflow to build and publish npm packages to GitHub Packages. The repo is a monorepo with several packages, so I am using the semantic-release-monorepo tool. However, the step to publish is failing and I can't figure out why.
My GitHub Actions workflow file is as follows (trimmed down slightly)
jobs:
build:
runs-on: ubuntu-latest
permissions:
contents: read
packages: write
env:
GH_TOKEN: ${{ secrets.MY_PAT }}
steps:
- name: Checkout repo
uses: actions/checkout#v2
run: |
yarn install
yarn build
- name: Setup node for publishing to Github packages
uses: actions/setup-node#v2
env:
NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
with:
node-version: "12.x"
registry-url: "https://npm.pkg.github.com"
- name: Yarn publish packages
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
run: |
yarn publish-packages
yarn publish-packages runs a script which executes the lerna command for semantic release
lerna exec --concurrency 1 -- npx --no-install semantic-release -e semantic-release-monorepo
I have made sure the repo package.json as well as the package.json for every package has the correct repository url, https://github.com/owner/repo.git. My personal access token has permissions to repo and write and delete packages.
No matter what configs I change, the step fails with the following messages:
The command "git push --dry-run --no-verify
https://[secure]#github.com/xxx/xxx.git HEAD:develop"
failed with the error message remote: Repository not found. 26 fatal:
repository 'https://github.com/xxx/xxx.git/' not found.
The second message is
EGITNOPERMISSION: 'semantic-release cannot push the version tag to
the branch develop on the remote Git repository with URL
https://[secure]#github.com/xxx/xxx.git
Other things I have tried:
Adding scope="#xxx" to the setup-node step after reading GH docs that says "GitHub Packages only supports scoped npm packages"
According to semantic-release docs, I have tried setting GH_TOKEN, GITHUB_TOKEN and NPM_TOKEN to every combination of my PAT or the GITHUB_TOKEN in secrets. I believe the docs say only PAT is supported. Also, NPM_TOKEN should not be required because using registry-url with the setup-node action creates an .npmrc file that uses NODE_AUTH_TOKEN by default.
There is an almost similar question here but adding .git to his repository url seems to have fixed it for him
Github docs say that I should be able to use a PAT or the GITHUB_TOKEN as the auth token in the .npmrc file, so that shouldn't be the issue
I've looked through the docs for semantic-release, semantic-release-monorepo, GitHub Actions, and GitHub Packages. If there is any additional information I need to include please let me know.
After some more trial and error, I discovered the cause. If my understanding is correct, a Github workflow will automatically use the available GITHUB_TOKEN secret to authenticate with Github during the step to checkout the repo using actions/checkout. It was then persisting the credentials from this step and reusing them for the step to publish packages, even though I was injecting a personal access token as an environment variable to that step.
In the end, the fix was to use the persist-credentials option in step one like this
steps:
- name: Checkout repo
uses: actions/checkout#v2
with:
persist-credentials: false
And then using the personal access token to authenticate with GitHub in the last step like I noted I believed should be the correct method in my question, as semantic-release docs state only PAT authentication is supported.
I'm trying to run my nodejs app on gitlab pages. I use a gitlab-ci.yml file for this where I deploy and run the nodejs app. Unfortunately the pipeline kills the process after 1 hour because the pipeline thinks running the nodejs app is part of the build script. I have two questions:
- Can you run a nodejs app on gitlab pages?
- If so, what is the best way to start the app?
Below you find the gitlab-ci.yml file.
Thanks!
image: node:latest
stages:
- build
cache:
paths:
- node_modules/
install_dependencies:
stage: build
script:
- npm install
- npm install -g nodemon
- NODE_ENV=production nodemon app.js
artifacts:
paths:
- node_modules/
Can you run a nodejs app on gitlab pages?
No! Gitlab pages allow you to host only static websites: https://about.gitlab.com/product/pages/
If so, what is the best way to start the app?
If your app is static, try to use a static site generator! If you wanna play with nodejs, try other hosting platforms like heroku or clever cloud
I already did CI, but now I want to deploy to my server. My server is the same machine where I do CI, but I do CI in docker-executor. So I can't have acces to server folders to update production.
There is my script:
image: node:9.11.2
cache:
paths:
- node_modules/
before_script:
- npm install
stages:
- test
- deploy
test:
stage: test
script:
- npm run test
deploy:
stage: deploy
script:
#here I want to go to /home/projectFolder and make git pull, npm i, npm start
# but I can't beause I run CI in docker-environment which hasn't acces to my server's dirictories.
First of all you should consider using gitlab auto cicd ( or use it as a base to customize if you dont want to use kubernetes)
You have multiple way to do so but the simplest way should be to use an alpine image and
- install ssh (if necessary)
- load your private ssh key ( from pipeline secrets)
- run your npm commands through ssh.
The cleanest way would be :
- generating adding a valid Dockerfile to your project
- adding docker image generation for each commit on master (in your pipeline)
- Adding docker rm running image (in your pipeline)
- Adding docker run the newly generated image (in your pipeline) (by sharing your docker volume)
- Make nginx redirect to your container.
I can give more detailed advice depending on what you decide to do.
Hoping i helped.