Deployment

— 4 minute read

Each aspect of the project - Landing Page, App, API and Blog - has it's own automated, single-command deployment process. I outline what these are here.

Landing Page

The landing page is a simple static site. There's no moving parts so it just needs to be uploaded to the server and it's good to go. The only issue is there's stuff in the project that shouldn't be uploaded (e.g. the deploy script!), for this reason I build a quick dist folder which is then uploaded.

  1. Create the dist folder.
  2. Copy css, js, images, fonts and index.html to the dist folder.
  3. scp the contents of the folder to the server.
  4. Remove the dist folder.

It would be possible to pick and choose these items to upload rather than collecting them in a dist folder, but this seems a bit clearer.

mkdir dist;

cp -R ./css ./dist/css;
cp -R ./js ./dist/js;
cp -R ./images ./dist/images;
cp -R ./fonts ./dist/fonts;
cp -R ./index.html ./dist/;

scp -r -i /path/to/key ./dist/* user@xxx.xxx.xxx.xxx:/path/to/dest/

rm -rf ./dist

App

The app is a VueJS app so there's an extra build step required. I tried setting this up as a BitBucket pipeline but couldn't get the app to build on the pipeline image so I gave up and just kept it local.

I have an npm command called builddeploy which builds the app and deploys it. This runs the npm run build and the npm run deploy commands. The deploy command is a basic shell script which uses SCP to upload the build output.

npm run build

sh deploy.sh
scp -r -i /path/to/key ./dist/* user@xxx.xxx.xxx.xxx:/path/to/dest/

API

The API is a simple ExpressJS Node app so can just be pulled down from git on the server. I then use PM2 to watch for changes and restart as needed.

The API has a BitBucket Pipeline set up to SSH into the server, cd into the correct directory and the run git pull. PM2 will then take over and restart the service accordingly.

// bitbucket-pipelines.yml
pipelines:
  branches:
    develop:
      - step:
          script:
            - ssh -t $STAGING_USER@$STAGING_SERVER -p $STAGING_PORT 'cd path/to/code; git pull'

Blog

The blog is built on Eleventy as an easy blogging platform. It has a build step which creates the static resources and then these resources are uploaded to the server with SCP. Exactly the same as the App.

Again, I have an npm command called builddeploy which handles everything and essentially does:

npm run production

sh.deploy.sh
// deploy.sh
scp -r -i /path/to/key ./dist/* user@xxx.xxx.xxx.xxx:/path/to/dest/

Improvements

I'm sure these could be improved but they give me a single command that will handle building and deploying each part of the project, which is very convenient!

Let me know if you have any suggestions!