Frontend Staging Deployment

This assumes you already for have Flynn setup on you local dev environment

Deploy a Vue Frontend to Flynn via Docker

1) Iniitalize App

Iniitalize an app with APP_NAME. This will be the same as the sub-domain for the staging site. Setting the remote to "" will setup without a git repo, and will assume you will be using docker.

flynn create --remote="" ${APP_NAME}

2) Build your image for deployment

Build your docker image, in this example we will use Stage.Dockerfile witch is a two step build process and builds the app, and then copies the build files to a new image, and deploys that. Make sure to tag the built image with the '14four' namespace, ie 14four/${APP_NAME}

docker build -t ${IMAGE_TAG} --file ${DOCKER_FILE} .

Example Stage.dockerfile

FROM node:10.15.1 as builder

# Create app directory
WORKDIR /usr/src/app/

# Install app dependencies
# A wildcard is used to ensure both package.json AND package-lock.json are copied
# where available (npm@5+)
COPY package*.json ./

# Building your code for production
RUN npm install

# Bundle app source
COPY . .

# Building your code for production
RUN npm run build:main

FROM nginx

COPY ./bin/vhost.conf /etc/nginx/conf.d/default.conf

COPY --from=builder /usr/src/app/php/public/static/ /usr/share/nginx/html/static/
COPY --from=builder /usr/src/app/php/resources/views/frontend/main.blade.php /usr/share/nginx/html/index.html

3) Test your image

Run your image after you build it. Map your local port(8888) to the main port on the nginx image(8080).

docker run  -p 8888:8080 ${IMAGE_TAG} 

4) Push your docker image to stage

Push you app to the staging server.

flynn -a ${APP_NAME} docker push ${IMAGE_TAG} 

If this is the initial deployment, it will ask you to scale the app, you can do this from the dsahboard, or to do this via command line you can run this command:

flynn -a ${APP_NAME} scale app=1