In this example we are going to create a production server using Github pages and Github actions.
We will start from 03-github-branch
.
npm install
to install previous sample packages:
npm install
We will use same approach as gh-pages
example, but we will use Github Actions for automatic deploys.
Create new repository and upload files:
git init
git remote add origin [email protected]...
git add .
git commit -m "initial commit"
git push -u origin main
Install gh-pages as dev dependency to deploy to Github pages:
npm install gh-pages --save-dev
Add deploy command:
./package.json
"scripts": {
"start": "run-p -l type-check:watch start:dev",
"start:dev": "vite --port 8080",
"build": "npm run type-check && npm run clean && npm run build:prod",
"build:prod": "vite build",
+ "build:dev": "vite build --mode development",
+ "deploy": "gh-pages -d dist",
...
},
Run dev build and deploy it:
npm run build:dev
npm run deploy
NOTE: We can run deploy because we have access to repository
since we are logged in Github
Add GitHub actions CD workflow:
./.github/workflows/cd.yml
name: CD workflow
on:
push:
branches:
- main
jobs:
cd:
runs-on: ubuntu-latest
steps:
- name: Checkout repository
uses: actions/checkout@v3
- name: Install
run: npm ci
- name: Build
run: npm run build
- name: Deploy
run: npm run deploy
Add commit with changes:
git add .
git commit -m "add continuos deployment"
git push
As we saw, the workflow was failed. Why? Because each time a Github job is executed, it's a new and clean machine outside repository. That is, we need to allow job's git push. The best approach is creating a new ssh key on local:
ssh-keygen -m PEM -t rsa -C "[email protected]"
> Enter file in which to save the key (/c/Users/nasda/.ssh/id_rsa): `./id_rsa`
> Enter passphrase (empty for no passphrase): `Pulse Enter for empty`
> Enter same passphrase again: `Pulse Enter for empty`
NOTES -m PEM: Format to apply. PEM is a common public/private key certificate format. rsa: RSA is the crypto algorithm. Enter
./id_rsa
to save files in currect directory You can leave empty the passphrasse field.
Copy id_rsa.pub
content to Github Settings
> Deploy keys
section:
Delete id_rsa.pub
file.
Copy id_rsa
content to Github Settings
> Secrets
section:
Delete id_rsa
file.
Now, we can use this shh private key to do a commit/push in Github's job:
./.github/workflows/cd.yml
name: CD workflow
on:
push:
branches:
- main
jobs:
cd:
runs-on: ubuntu-latest
steps:
- name: Checkout repository
uses: actions/checkout@v3
+ - name: Use SSH key
+ run: |
+ mkdir -p ~/.ssh/
+ echo "${{secrets.SSH_PRIVATE_KEY}}" > ~/.ssh/id_rsa
+ sudo chmod 600 ~/.ssh/id_rsa
+ - name: Git config
+ run: |
+ git config --global user.email "[email protected]"
+ git config --global user.name "cd-user"
- name: Install
run: npm ci
- name: Build
run: npm run build
- name: Deploy
- run: npm run deploy
+ run: npm run deploy -- -r [email protected]:<your-repo>
NOTES: "Use SSH key" step: create id_rsa with ssh private key in default ssh folder and add write permits.
"Deploy" step: update deploy command with repository's SSH URL.
git add .
git commit -m "configure git cd-user permits"
git push
We are an innovating team of Javascript experts, passionate about turning your ideas into robust products.
Basefactor, consultancy by Lemoncode provides consultancy and coaching services.
Lemoncode provides training services.
For the LATAM/Spanish audience we are running an Online Front End Master degree, more info: http://lemoncode.net/master-frontend