Ask Your Question
4

How to establish CI/CD for a static website on an Ubuntu 20.04 server without utilizing Docker?

asked 2022-10-21 11:00:00 +0000

plato gravatar image

edit retag flag offensive close merge delete

1 Answer

Sort by ยป oldest newest most voted
2

answered 2021-06-19 14:00:00 +0000

devzero gravatar image

Here is a step-by-step guide to establish CI/CD for a static website on an Ubuntu 20.04 server without utilizing Docker:

  1. Install Git on the Ubuntu 20.04 server:

    sudo apt update
    sudo apt install git
    
  2. Configure SSH for Git by generating a new SSH key and adding it to the Git account:

    ssh-keygen -t rsa -b 4096 -C "your_email@example.com"
    

    Copy the SSH key to the clipboard:

    cat ~/.ssh/id_rsa.pub
    
  3. Create a new repository on GitHub or GitLab and add the generated SSH key to the repository.

  4. Install Nginx on the Ubuntu 20.04 server:

    sudo apt update
    sudo apt install nginx
    
  5. Configure Nginx to serve the static website by editing the default Nginx configuration file:

    sudo nano /etc/nginx/sites-available/default
    

    Add the following configuration, replacing the example.com and path/to/static/files with your domain and path to your static files:

    server {
        listen 80;
        server_name example.com;
        root /var/www/path/to/static/files;
        index index.html;
        location / {
            try_files $uri $uri/ /index.html;
        }
    }
    

    Save and close the file.

  6. Create a new directory to store the static website files:

    sudo mkdir -p /var/www/path/to/static/files
    
  7. Clone the repository with the static website files:

    git clone git@github.com:<username>/<repository>.git /var/www/path/to/static/files
    

    Replace <username> and <repository> with your GitHub or GitLab username and repository name.

  8. Install Node.js and npm on the Ubuntu 20.04 server:

    sudo apt update
    sudo apt install nodejs npm
    
  9. Install the npm install serve package globally:

    sudo npm install -g serve
    
  10. Create a serve script in the root directory of the cloned repository with the following content:

    #!/bin/bash
    serve -s -l 3000 build
    
  11. Make the serve script executable:

    sudo chmod +x serve
    
  12. Create a new webhook on GitHub or GitLab that triggers a POST request to a specific URL when a push is made to the repository.

  13. Install nginx-extras package on the Ubuntu 20.04 server:

    sudo apt install nginx-extras
    
  14. Use Lua to create a new location block on the Nginx configuration file. This new location will receive the POST request from the webhook and execute the deploy.sh script:

    location /deploy {
        # Only allow access from GitHub IPs
        allow <github-ip-address>;
        # The script checks out the latest changes and deploys the updated version
        # of the website
        content_by_lua_block {
            os.execute("/var/www/path/to/static/files/deploy.sh")
        }
        # Deny all other requests
        deny all;
    }
    

    Replace <github-ip-address> with the IP address range of GitHub.

  15. Create a new script named deploy.sh in the root directory of the cloned repository with the following content:

    #!/bin/bash
    
    # Change to the cloned repository directory
    cd /var/www/path/to/static/files
    
    # Pull the latest changes from the repository
    git pull origin master
    
    # Build the static website files with your favorite static site generator
    npm run build
    
    # Start the website with the serve script
    ./serve &
    

    Replace path/to/static/files with the actual path to the directory where the website files are located.

  16. Make the deploy.sh script executable:

    sudo chmod +x deploy.sh
    
  17. Restart Nginx to apply the new configuration:

    sudo systemctl restart nginx
    
  18. After pushing changes to the repository, the webhook should trigger a POST request to the server, which will execute the deploy.sh script and update the website.

edit flag offensive delete link more

Your Answer

Please start posting anonymously - your entry will be published after you log in or create a new account. This space is reserved only for answers. If you would like to engage in a discussion, please instead post a comment under the question or an answer that you would like to discuss

Add Answer


Question Tools

Stats

Asked: 2022-10-21 11:00:00 +0000

Seen: 13 times

Last updated: Jun 19 '21