[Updated] Deploy Angular to Production with Github Actions
Github Actions is cool. Angular is the best. Deploy your Angular application with Github Actions. Here’s how
To create your Github action, you can go here: https://github.com/your-github-username/your-repository/actions
Create a blank workflow, and copy paste the section below
name: CI
on: [push]
jobs:
build:
# using Ubuntu
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v1
- uses: actions/setup-node@v1 #this installs node and npm for us
with:
node-version: '10.x'
- uses: actions/cache@v1 # this allows for re-using node_modules caching, making builds a bit faster.
with:
path: ~/.npm
key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
restore-keys: |
${{ runner.os }}-node-
- run: npm install
- run: npm install -g @angular/cli > /dev/null
- run: ng build --prod
- name: copy file via ssh key
uses: appleboy/scp-action@master
with:
HOST: khophi.com
USERNAME: username
PORT: 22
KEY: ${{ secrets.forSSH }}
source: "./dist/your-angular-app-name/"
target: "/home/user/domain.com/pwa/"
strip_components: 3 # this is important
For the above workflow to work, the last step is to add the contents of your ~/.ssh/id_rsa
to https://github.com/your-username/repository-name/settings/secrets
That way, the KEY: ${{ secrets.forSSH }}
part will work. Remember to name it forSSH
or anything you like, and change it accordingly in the above workflow script.
That way, the above will copy the contents after the build looks like this
The destination folder is /home/user/domain.com/pwa
The source folder, which is the temporal project folder created by github during the actions is ./dist/your-project name
I hope the above helps. Happy coding!