Na primeira parte falei sobre como construir nosso ambiente de trabalho para trabalhar com a UI5 localmente, em vez de usar o WebIDE. Agora, nesta segunda parte da publicação veremos como fazer isso usando o Docker para configurar nosso ambiente.

Usarei o docker-compose para configurar o projeto. Basicamente, como explico na primeira parte, o projeto tem duas partes: um back-end e um front-end. Vamos usar exatamente o mesmo código para o front-end e para o back-end.

O front-end é construído sobre um localneo. Como é um aplicativo de node, usaremos um node: alpine base host.

FROM node:alpine
 
EXPOSE 8000
 
WORKDIR /code/src
COPY ./frontend .
RUN npm install
ENTRYPOINT ["npm", "run", "serve"]

No docker-compose, precisamos apenas mapear a porta que iremos expor em nosso host e, como queremos esse projeto em nosso processo de desenvolvimento, também mapearemos o volume para evitar a re-geração do nosso contêiner cada vez que alterarmos o código.

...
  ui5:
    image: gonzalo123.ui5
    ports:
    - "8000:8000"
    restart: always
    build:
      context: ./src
      dockerfile: .docker/Dockerfile-ui5
    volumes:
    - ./src/frontend:/code/src
    networks:
    - api-network

O back-end é um aplicativo PHP. Podemos configurar um aplicativo PHP usando arquiteturas diferentes. Neste projeto, usaremos o nginx e o PHP-FPM.

Para o nginx, usaremos o seguinte Dockerfile:

FROM  nginx:1.13-alpine
 
EXPOSE 80
 
COPY ./.docker/web/site.conf /etc/nginx/conf.d/default.conf
COPY ./backend /code/src

E para o host PHP, o seguinte (com o xdebug para ativar a depuração e os pontos de interrupção):

FROM php:7.1-fpm
 
ENV PHP_XDEBUG_REMOTE_ENABLE 1
 
RUN apt-get update && apt-get install -my \
    git \
    libghc-zlib-dev && \
    apt-get clean
 
RUN apt-get install -y libpq-dev \
    && docker-php-ext-configure pgsql -with-pgsql=/usr/local/pgsql \
    && docker-php-ext-install pdo pdo_pgsql pgsql opcache zip
 
RUN curl -sS https://getcomposer.org/installer | php -- --install-dir=/usr/local/bin --filename=composer
 
RUN composer global require "laravel/lumen-installer"
ENV PATH ~/.composer/vendor/bin:$PATH
 
COPY ./backend /code/src

E basicamente isso é tudo. Aqui o arquivo completo do docker-compose.

version: '3.4'
 
services:
  nginx:
    image: gonzalo123.nginx
    restart: always
    ports:
    - "8080:80"
    build:
      context: ./src
      dockerfile: .docker/Dockerfile-nginx
    volumes:
    - ./src/backend:/code/src
    - ./src/.docker/web/site.conf:/etc/nginx/conf.d/default.conf
    networks:
    - api-network
  api:
    image: gonzalo123.api
    restart: always
    build:
      context: ./src
      dockerfile: .docker/Dockerfile-lumen-dev
    environment:
      XDEBUG_CONFIG: remote_host=${MY_IP}
    volumes:
    - ./src/backend:/code/src
    networks:
    - api-network
  ui5:
    image: gonzalo123.ui5
    ports:
    - "8000:8000"
    restart: always
    build:
      context: ./src
      dockerfile: .docker/Dockerfile-ui5
    networks:
    - api-network
 
networks:
  api-network:
    driver: bridge

Se quisermos usar este projeto, você só precisa:

• Clonar o repo do GitHub
• Executar ./ui5 up

Com essa configuração estamos expondo duas portas 8080 para o front-end e 8000 para o back-end. Também estamos mapeando nosso sistema de arquivos local para contêineres para evitar a regeneração de nossos contêineres toda vez que alteramos o código.

Nós também podemos ter uma variação. Uma versão de “produção” do nosso arquivo de composição do docker. Coloco a produção entre aspas, porque normalmente não usamos o localneo como servidor de produção (por favor, não faça isso). Usaremos o SCP para hospedar o front-end.

Essa configuração é apenas um exemplo sem mapeamento do sistema de arquivos, sem o xdebug no back-end e sem expor o back-end externamente (somente o front-end pode usá-lo).

version: '3.4'
 
services:
  nginx:
    image: gonzalo123.nginx
    restart: always
    build:
      context: ./src
      dockerfile: .docker/Dockerfile-nginx
    networks:
    - api-network
  api:
    image: gonzalo123.api
    restart: always
    build:
      context: ./src
      dockerfile: .docker/Dockerfile-lumen
    networks:
    - api-network
  ui5:
    image: gonzalo123.ui5
    ports:
    - "8000:8000"
    restart: always
    build:
      context: ./src
      dockerfile: .docker/Dockerfile-ui5
    networks:
    - api-network
 
networks:
  api-network:
    driver: bridge

E isso é tudo. Você pode ver todo o código-fonte na minha conta do GitHub.

***

Gonzalo Ayuso faz parte do time de colunistas internacionais do iMasters. A tradução do artigo é feita pela Redação iMasters, com autorização do autor, e você pode acompanhar o artigo em inglês no link: https://gonzalo123.com/2018/09/03/working-with-sapui5-locally-part-2-now-with-docker/