Photo by Henrik Hjortshøj on Unsplash
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!