diff --git a/.vscode/settings.json b/.vscode/settings.json index 07322ec..c1fa0fb 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -5,7 +5,8 @@ "devops", "docker", "graphql", - "cicd" + "cicd", + "scripts" ], "conventionalCommits.gitmoji": false, "conventionalCommits.promptFooter": false, diff --git a/frontend/.dockerignore b/frontend/.dockerignore new file mode 100644 index 0000000..3908605 --- /dev/null +++ b/frontend/.dockerignore @@ -0,0 +1,4 @@ +.nuxt +.output + +node_modules diff --git a/frontend/Dockerfile b/frontend/Dockerfile new file mode 100644 index 0000000..25b3552 --- /dev/null +++ b/frontend/Dockerfile @@ -0,0 +1,28 @@ +FROM oven/bun:alpine AS build + +ENV NODE_ENV=production +WORKDIR /build + +# Install Dependencies +COPY package.json bun.lockb /build/ +RUN ["bun", "install", "--frozen-lockfile"] +# Build Application +COPY . /build/ +RUN ["bun", "run", "predev"] +RUN ["bun", "run", "build"] + + + +FROM oven/bun:alpine AS production + +ENV NODE_ENV=production +WORKDIR /app + +# Install Production Dependencies +COPY package.json bun.lockb /app/ +RUN ["bun", "install", "--production", "--frozen-lockfile"] +# Copy server over from build +COPY --from=build /build/.output /app + +ENTRYPOINT [ "bun" ] +CMD [ "run", "/app/server/index.mjs" ] diff --git a/frontend/README.md b/frontend/README.md index 1ae3c8b..fb85a74 100644 --- a/frontend/README.md +++ b/frontend/README.md @@ -4,38 +4,82 @@ This directory contains the frontend browser code for the OEE SMIP Web Applicati Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more. -## Setup +## Development + +### Setup Make sure to install the dependencies: ```bash -# bun bun install ``` -## Development Server +### Development Server Start the development server on `http://localhost:3000`: ```bash -# bun bun run dev ``` -## Production +## Deployment + +This application is intended to be deployed using [Docker](#docker). If this isn't possible or desireable, see the [Manual](#manual) deployment instructions. + +### Docker + +The `Dockerfile` for this application Docker image is in the `frontend` directory. You can either build manually, or use a utility script in the `scripts` directory: + +```sh +# Change into the `frontend` directory, which contains the web application. +cd frontend + +# Build the Docker image: +docker build --tag oee-smip-app: . +# OR +./scripts/build-docker.sh +``` + +After words the image can be run using the `docker` command: + +```sh +# Run the application in a container, forwarding host port 3000 to the server running on port 3000. +docker run -p 3000:3000 oee-smip-app: +``` + +#### Deploying on Other Machines + +If you can't or don't want to build the Docker image on the same machine you wish to deploy/run it on, you can: + +1. build the image as above on the build machine, +2. save the built image to a file on the build machine, +3. transfer the file over to the deployment machine, +4. load the image file into Docker on the deployment machine, and +5. run the image as above on the deployment machine. + +```sh +# Save image to file, compressing it to save space. +# This may take a minute... +docker save oee-smip-app: | gzip > oee-smip-app.tar.gz + +# ...transfer to deployment machine, using tools like `scp`, `sftp`, or other file transfer software... + +# Load the image on the deployment machine. +docker load -i oee-smip-app.tar.gz +``` + +### Manual -Build the application for production: +Manually build the application for production: ```bash -# bun bun run build ``` -Locally preview production build: +Locally run the production build: ```bash -# bun -bun run preview +bun run start ``` Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information. diff --git a/frontend/scripts/build-docker.sh b/frontend/scripts/build-docker.sh new file mode 100755 index 0000000..450096f --- /dev/null +++ b/frontend/scripts/build-docker.sh @@ -0,0 +1,3 @@ +#!/bin/sh + +docker build --tag oee-smip-app:0.1.0 .