Hur du använder Docker i ditt Vue- eller React-projekt

Hallå där!

Idag tänkte jag att vi skulle gå igenom hur vi kan använda Docker för vårt Vue- eller React-projekt. Docker har funnits med ett tag nu och jag tror säkert att många av er är nyfika på att nyttja möjligheterna med Docker, men inte riktigt vet vart ni ska börja. Jag kommer att hålla denna guide relativt kort, men förhoppningsvis ger det er möjligheten att bygga vidare på er lösning och underlätta både utveckling och produktionssättning av ert webbprojekt.

Både React och Vue är väldigt enkelt att komma igång med och utveckla lokalt, men när man är flera utvecklare som arbetar genom olika operativsystem kan man stöta på problem. Framför allt om man använder databaser eller andra lösningar som inte har stöd för vissa operativsystem (exempelvis SQL Server på Mac). Lösningen blir då att slänga in applikationen i en “container” med hjälp av Docker, och på så sätt låta allt köras i det operativsystem som vi väljer för vår Docker-container. Då slipper utvecklare och hosting-providers tänka på att konfigurera sitt eget system för att få webbapplikationen att köras.

Förutsättningar

  • Vi behöver ha Docker installerat
  • Vi behöver ha Node och NPM installerat, och/eller Yarn om du föredrar att använda det
  • Om du vill använda Vue behöver du installera Vue-CLI

Guide

  1. Vi börjar med att starta ett webbprojekt. För React så kan vi kicka igång det hela med npx create-react-app och för Vue börjar vi med vue create app . 2. Vi skapar en Dockerfile-fil i vår src-mapp. Dockerfile används för att visa Docker hur vi vill konfigurera vår Docker-miljö, man kan se det som ett specifikationsblad för allt vi behöver för vår applikation.
  2. Vi skapar konfigurationen i vår Dockerfile
// Dockerfile
# build stage
FROM node:lts-alpine as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

# production stage
FROM nginx:stable-alpine as production-stage
COPY --from=build-stage /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
  1. Vi skapar en .dockerignore-fil för att inte ta med onödiga filer i vår Docker-container
// .dockerignore
.git
.DS_Store
node_modules
dist
  1. Projektstrukturen bör nu se ut ungefär såhär (i exemplet använder vi Vue)
  1. Vi kan nu bygga vår Docker-container docker build -t my-vue-app . 7. Grymt! Nu kan vi starta vår Docker-container med följande kommando. Du kan nu nå din Vue-applikation genom att gå till http://localhost:3000 via valfri webbläsare. docker run -it -p 3000:80 --rm --name my-vue-app-1 my-vue-app 

Guider

Tips & Tricks