Bu makalede Docker kullanarak yeni bir Vue Js projesi oluşturacağız geliştireceğiz ve yayınlıyacağız.

Gereksinimler:

• Temel seviyede Docker bilgisi
• Temel seviyede Vue-Cli bilgisi
• Docker yüklü bir bilgisayar

Docker hakkında hiç bilginiz yok ise “ yeni-nesil-gelistirme-ortami-bolum-1-docker “ makalemi okuyabilisiniz.

Docker ve Vue Cli ile Yeni Bir Vue Js Projesi Nasıl Oluşturulur ?

Yeni bir poje oluşturmak için aşağıdaki kodu çalıştıralım.

mkdir vue-docker && cd "$_" && docker run --rm -v "${PWD}:/$(basename `pwd`)" -w "/$(basename `pwd`)" -it node:11.1-alpine sh -c "yarn global add @vue/cli && vue create ."

Not: Yeni bir poje oluştururken “vue-docker” kısmını kendi proje adınız ile değiştirebilirsiniz. “vue create .” kımını “vue init webpack .” vb. değiştirerek herhangi bir vue-cli komutu ile projenizi oluşturabilirsiniz.

Docker ile Vue Js Projesi Yayınlamak (Deploy)

Vue Js projemizi Docker ile yayınlamak (deploy) için Dockerfile oluşturalım ve içerisine aşağıdaki kodları yerleştirelim.

# develop stage
FROM node:11.1-alpine as develop-stage
WORKDIR /app
COPY package*.json ./
RUN yarn install
COPY . .
# build stage
FROM develop-stage as build-stage
RUN yarn build
# production stage
FROM nginx:1.15.7-alpine as production-stage
COPY --from=build-stage /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Dockerfile’ ı vue-docker ismiyle etiketleyerek imaj (image) alalım.

docker build -t vue-docker .

Docker Konteynerı(Container) çalıştıralım.

docker run -it -p 80:80 --rm vue-docker

Şimdi tarayıcımızdan http://localhost adresine gidelim.

Yukarıdaki görüntü ile karşılaştıysak her şey yolunda demektir.

Docker ile Vue JS Projesi Nasıl Geliştirilir (Development)

Docker ile VueJS projesi geliştirmek için docker-compose kullanacağız.

docker-compose.yml ismi ile dosya oluşturup içerisine aşağıdaki komutları yerleştirelim.

version: '3.5'
services:
  frontend:
    build:
      context: .
      target: 'develop-stage'
    ports:
    - '8080:8080'
    volumes:
    - '.:/app'
    command: /bin/sh -c "yarn serve"

frontend servisini hedefi(target) “develop-stage” olarak çalıştıralım.

docker-compose up -d

Şimdi tarayıcımızdan http://localhost:8000 adresine gidelim.

Her zaman çalıştığımız gibi kodumuzda herhangi bir değişiklik yaptığımız zaman kodumuz derlenecek ve tarayıcımız otomatik olarak yeniden yüklenecek.

Projemize herhangi bir başka paket yüklemek için aşağıdaki komutu kullanabiliriz.

docker-compose exec frontend yarn add <paket-ismi>

Kaynaklar:

• Dockerize Vue.js App
• Vue with Docker; initialize, develop and build