Deploying a Web App to a Server with Ansible, Part III: Admin Interface

My recent posts have been dealing with the deployment of my math-themed web app to an Ubuntu server with Ansible. Here are links to the previous articles:

Deploying a Web App to a Server with Ansible, Part I: API
Deploying a Web App to a Server with Ansible, Part II: Frontend

I've now successfully deployed the last component of the app as well: the admin interface. Here, I will go through the Ansible YAML playbook I'm using for deployment.

I again added a header:

---
- hosts: all
  name: Math Admin

  tasks:

Adding some directories again:

  - name: Create ts-math directory
    ansible.builtin.file:
      path: /home/maija/ts-math
      state: directory
      mode: '0755'

  - name: Create app src directory
    ansible.builtin.file:
      path: /home/maija/apps/math-admin/src
      state: directory
      mode: '0755'

  - name: Create log directory
    ansible.builtin.file:
      path: /home/maija/log
      state: directory
      mode: '0755'

Checkout the whole project from git:

  - name: Checkout code from git repo
    ansible.builtin.git:
      repo: 'https://github.com/mkkekkonen/TS-Math.git'
      dest: /home/maija/ts-math
      force: yes

Next, I perform some NPM-related tasks. I install the needed packages in the admin app source code directory, delete the previous build directory if it exists, and build the project:

  - name: Install packages
    ansible.builtin.shell:
      chdir: /home/maija/ts-math/admin
      cmd: npm install > /home/maija/log/admin-install-log.txt

  - name: Delete dist directory
    ansible.builtin.file:
      path: /home/maija/ts-math/admin/dist
      state: absent

  - name: Build project
    ansible.builtin.shell:
      chdir: /home/maija/ts-math/admin
      cmd: npm run build > /home/maija/log/admin-build-log.txt

The actual runnable apps reside in the /home/maija/apps directory of my server. I copy the contents of the build directory there as well as the required Handlebars views and assets:

  - name: Copy built files
    ansible.builtin.copy:
      src: /home/maija/ts-math/admin/dist/
      dest: /home/maija/apps/math-admin
      remote_src: yes

  - name: Copy views
    ansible.builtin.copy:
      src: /home/maija/ts-math/admin/src/views
      dest: /home/maija/apps/math-admin/src
      remote_src: yes

  - name: Copy assets
    ansible.builtin.copy:
      src: /home/maija/ts-math/admin/src/assets
      dest: /home/maija/apps/math-admin/src
      remote_src: yes

Now, I need some things NPM uses when running the app - specifically, the package.json file and the node_modules directory. I copy the former file and create a symlink to the latter (a rather ugly hack to avoid installing the packages again).

  - name: Copy package.json
    ansible.builtin.copy:
      src: /home/maija/ts-math/admin/package.json
      dest: /home/maija/apps/math-admin/package.json
      remote_src: yes

  - name: Link node_modules
    ansible.builtin.file:
      src: /home/maija/ts-math/admin/node_modules
      dest: /home/maija/apps/math-admin/node_modules
      owner: maija
      group: maija
      state: link

Last but not least, I actually run the app with PM2. I need an ecosystem file that I upload from my Windows machine. Finally, the app is started.

  - name: Upload pm2 ecosystem file
    ansible.builtin.copy:
      src: /mnt/c/path/to/admin.ecosystem.config.js
      dest: /home/maija/apps/math-admin/ecosystem.config.js

  - name: Restart app
    ansible.builtin.shell:
      executable: /bin/bash
      chdir: /home/maija/apps/math-admin
      cmd: pm2 restart ecosystem.config.js

I can now access the admin app on my server!