Denis Blog

Steps

Have the application already implemented.

You must to create a folder called .github on root project

Inside folder .github you must to cerate a folder workflows

Inside folder workflows you must to cerate a file with extension .yml Example deploy.yml

.github
  workflows
    deploy.yml

--------------------------------------deploy.yml--------------------------------------

name: publish
on:
  push:
    branches: ["master"] #You can have more branches Example ["master", "main", "prod"]
jobs:
  create-docker-image:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout the code
        uses: actions/checkout@v2

      - name: Login to GitHub Container Registry
        uses: docker/login-action@v1
        with:
          registry: ghcr.io
          username: ${{ github.actor }}
          password: ${{ secrets.TOKEN_DEPLOY }}

      - name: Build the Docker image
        run: |
          docker build . --tag ghcr.io/[username on github]/[name of repository]:latest
          docker push ghcr.io/[username on github]/[name of repository]:latest
  deploy:
    needs: create-docker-image
    runs-on: ubuntu-latest
    steps:
      - name: Deploy App
        uses: appleboy/ssh-action@v0.1.2
        with:
          host: ${{ secrets.HOST_VPS }}
          username: ${{ secrets.USERNAME_VPS }}
          port: ${{ secrets.PORT_VPS }}
          password: ${{ secrets.PASSWORD_VPS }}
          script: |
            docker login ghcr.io -u [username on github] -p ${{ secrets.TOKEN_DEPLOY }}
            docker pull ghcr.io/[username on github]/[name of repository]:latest
            docker stop [name of repository]
            docker rm [name of repository]
            docker run -d \
            --name [name of repository] \
            -p 4200:80 \
            -w /app \
            --restart always \
            ghcr.io/[username on github]/[name of repository]:latest

--------------------------------------deploy.yml--------------------------------------

If it is the first time you upload the image to the VPS server, do not place these lines, because Docker will try to stop and delete a container that does not exist, after uploading the image to the server then you can place them as shown in step former

docker stop [name of repository]
docker rm [name of repository]

On root project you must to create file called nginx.conf

--------------------------------------nginx.conf--------------------------------------

server {
    location / {
        root /usr/share/nginx/html;
        try_files $uri $uri/ /index.html;
    }
}

--------------------------------------nginx.conf--------------------------------------

On root project you must to create file called Dokerfile

--------------------------------------Dokerfile--------------------------------------

# ----------------------------
# build from source
# ----------------------------
FROM node:20-alpine AS build

WORKDIR /app

COPY package*.json .

RUN npm install

COPY . .

RUN npm run build

# ----------------------------
# run with nginx
# ----------------------------
FROM nginx

RUN rm /etc/nginx/conf.d/default.conf
COPY nginx.conf /etc/nginx/conf.d
COPY --from=build /app/dist/[name of project] /usr/share/nginx/html

EXPOSE 80

Create a file called .dockerignore on root project

--------------------------------------.dockerignore-----------------------------------

node_modules
test
.gitignore
.git
.prettierrc
Dockerfile
README.md
.angular
.vscode
.editorconfig

--------------------------------------.dockerignore-----------------------------------

--------------------------------------Dokerfile--------------------------------------

Now you must execute command git add .

Then you must to execute git commit -m "name of commit"

Finally you must to excute the command git push origin master

master is the branch specific on line branches: ["master"] on file deploy.yml