Nueva Handbook

# Deployment

# Nuxt-Bitbucket Deployment

This section is about how to setup a deployment in Bitbucket for a Nuxt server side rendered project.

The Pipeline looks like this at the moment.

image: node:10.15.3

pipelines:
  default:
    - step:
        name: Build and test
        caches:
          - node
        script:
          - npm install
          - npm run build
          - echo "$(ls -la ./nuxt/)"
          - ls -lah
        artifacts: # defining the artifacts to be passed to each future step.
          - .nuxt/*
          - .nuxt/**
          - .nuxt/dist/**
          - .nuxt/dist/*
  branches:
    develop:
      - step:
          name: Build and test
          caches:
            - node
          script:
            - npm install
            - npm run build
          artifacts: # defining the artifacts to be passed to each future step.
            - .nuxt/*
            - .nuxt/**
            - .nuxt/dist/**
            - .nuxt/dist/*
      - step:
          name: Deploy Production
          image: cabag/rsync
          script:
            - mkdir upload
            - mv .nuxt/ static/ nuxt.config.js package.json i18n/ config/ upload
            - echo "$(ls -la ./upload/)"
            - rsync --no-perms -az "upload/" "${DEPLOY_USER}@${DEPLOY_HOST}:/home/${DEPLOY_USER}/apps/${PROJECT_NAME}/"
            - ssh "${DEPLOY_USER}@${DEPLOY_HOST}" "cd /home/adufezuk/apps/${PROJECT_NAME} && npm install"
            - >
              if $(ssh "${DEPLOY_USER}@${DEPLOY_HOST}" "test -f ~/.services/supervisord/${PROJECT_NAME}/service.conf"); then
                ssh "${DEPLOY_USER}@${DEPLOY_HOST}" "supervisorctl -c ~/.services/supervisord/hostpoint.conf restart ${PROJECT_NAME}";
              else
                ssh "${DEPLOY_USER}@${DEPLOY_HOST}" "hpservices supervisord add ${PROJECT_NAME}";
                ssh "${DEPLOY_USER}@${DEPLOY_HOST}" bash -c "'
                cat << EOF > ~/.services/supervisord/${PROJECT_NAME}/service.conf
                [program:${PROJECT_NAME}]
                command=npm run start
                directory=%(ENV_HOME)s/apps/${PROJECT_NAME}/
                stdout_logfile=%(ENV_HOME)s/.services/supervisord/${PROJECT_NAME}/log/default.log
                stderr_logfile=%(ENV_HOME)s/.services/supervisord/${PROJECT_NAME}/log/default.err
              EOF'";
                ssh "${DEPLOY_USER}@${DEPLOY_HOST}" 'supervisorctl -c ~/.services/supervisord/hostpoint.conf update';
              fi
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
  1. (Line 28-32) Important is the whole build is given to the next step as artifacts.
  2. (Line 37) Then we create a upload folder which is make it easier to just upload this folder with rsync.
  3. (Line 38) All files which are needed on the server to run the project are put into the upload folder.
    1. Inside the .nuxt/ folder is the whole build.
    2. Inside the static folder is are all static files which are not bundled from web pack.
    3. nuxt.config.js basic config of the nuxt project.
    4. package.json is needed because when don't have a standalone build(yet more on this below). so we need to run npm install on the server, otherwise we would need to copy the node_modules and that is not efficient.
    5. i18n I really don't know why this isn't in the build maybe someone can help. When we didn't deploy this folder we had a cannot find ./i18n module error and couldn't start the project.
    6. config is for the environment variables.
  4. (Line 40) Then we upload the upload folder with rsync.
  5. (Line 41) Next step is to login into the server and run the npm install on the server.
  6. (Line 43 - 53) Last step is to check if the project has already a supervisor config if not create one otherwise just restart the project. Supervisor is installed on the flex server from hostpoint.

# Bitbucket setup

  1. Go to settings.
  2. Pipelines/ SSH Keys add a new private and public key for the server and run known_hosts with the server adress. (Login to the server and create with ssh-keygen -N "" -m PEM -f project a new key)
  3. Pipelines/ Repository Variables add all variables which are in the pipeline code. (Everything which start with a $ and has curly braces)
    • Following Variables are used:
      1. DEPLOY_USER is the ssh user
      2. DEPLOY_HOST is the name for the ssh server
      3. PROJECT_NAME is the name used for the supervisor process

# Hostpoint setup(optional)

This is a helper for when we host the project on the flex server from hostpoint.

  1. Login to the hostpoint admin.
  2. go to the server (adufezuk)
  3. go to websites
  4. press new website
  5. choose a domain name
  6. as configuration for nginx choose Nginx Custom Mode (Proxy auf eigene Applikation)
  7. as port choose one which is not taken

# nuxt.config.js

Also important could be how to configure a port otherwise we don't know on which port the project is running. Therefore set in the .env.production file a variable PORT with the port you want. And in the nuxt.config.js add:

server: {
    port: process.env.PORT // default: 3000
},
1
2
3

# .env file

When the project is deployed go to the staging and prod folder and add a .env file with the matching port you defined in hostpoint.

# Why we need to install the node_modules

Because we don't have a standalone build yet. Standalone merge request (opens new window) is merged but I tested and somehow it didn't work. So I wait until Standalone Documentation (opens new window) is finished so I can test again.