환경 변수를 허용하는 판매 또는 대시보드 도커 이미지 빌드

9843 단어 dockersaleordashboardsaleorreact
landing page에 언급된 Saleor는

An open-source, GraphQL-first e-commerce platform delivering ultra-fast, dynamic and personalized shopping experiences.



Saleor는 별도의 구성 요소로 구축됩니다.
  • saleor-core 이것은 graphql API
    • 입니다.

  • 앱
    • 의 amdin 영역인 saleor-dashboard
  • saleor-storefront 전자 상거래 플랫폼
    • 의 사용자 대면 부분

    일반적으로 우리는 개발자로서 판매 또는 팀에서 제공하는 처음 2개의 구성 요소를 사용하고 그 위에 맞춤형 상점을 구축합니다.

    문제


    saleor-dashboard는 도커 컨테이너에서 정적 사이트로 빌드되는 반응 앱이지만 그렇게 하려면 빌드 시간에 API_URI를 제공해야 합니다.
    예를 들어 4개의 환경development, stagging, test 및 production가 있는 경우 4개의 서로 다른 버전의 대시보드를 빌드해야 합니다.

    나는 다른 사람이 같은 질문을 했는지 알아보기 위해 둘러보다가 이것을 찾았습니다issue #1592.

    내 솔루션



    위에서 언급한 문제에 대한 유일한 대답은 config.ts 및 index.html 파일을 수정하는 것이 트릭을 수행할 것이라고 제안했기 때문에 수동으로 수행할 수 있는 방법을 설명한 다음 프로세스를 자유롭게 자동화할 수 있습니다.

    대시보드 코드 가져오기



    리포지토리를 복제하고 빌드해야 하는 버전을 체크아웃합니다.

    git clone --depth 1 --branch <ref>  https://github.com/saleor/saleor.git


    구성 파일


    env.sh env 변수를 읽고 구성 자바스크립트 파일을 생성하는 bash 스크립트$API_URI를 생성합니다. 이 스크립트는 도커 컨테이너가 시작되기 전에 매번 실행됩니다.

    Docker 컨테이너는 dashboard라는 폴더에서 대시보드를 제공하므로 스크립트가 동일한 폴더에 env 파일을 생성합니다.

    #!/bin/bash
target_file=./dashboard/env-config.js

touch $target_file
rm -rf $target_file

echo "window._env_ = {" >> $target_file
  echo "  API_URI: \"$API_URI\"," >> $target_file
echo "}" >> $target_file


    생성된 파일은 다음과 같아야 합니다.

    window._env_ = {
    API_URI: "<api-url-from-env>"
}


    src/index.html 수정



    대시보드의 기본 html 파일을 편집하고 헤드에 이 스크립트 태그를 추가합니다.

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="robots" content="noindex">
    <title>Saleor e-commerce</title>
    <script src="/dashboard/env-config.js"></script>  <!-- add this line-->
  </head>

  <body>
    <div id="dashboard-app"></div>
  </body>
</html>


    src/config.ts 수정



    이제 빌드 시간에 환경에서 읽는 대신 런타임에 API_URI 개체에서 window를 읽습니다.

    import packageInfo from "../package.json";
import { SearchVariables } from "./hooks/makeSearch";
import { ListSettings, ListViews, Pagination } from "./types";

export const APP_MOUNT_URI = process.env.APP_MOUNT_URI || "/";
export const APP_DEFAULT_URI = "/";
// remove this line
export const API_URI = process.env.API_URI;

// add these 2 lines, typescript build would fail without the @ts-ignore
// @ts-ignore
export const API_URI = window._env_.API_URI;
....
....


    Dockerfile 수정



    도커 파일의 경우 2가지 작업을 수행해야 합니다.
  • env.sh 스크립트를 도커 이미지 루트
    • 에 복사합니다.
  • 컨테이너를 시작하기 전에 env.sh를 실행하도록 명령 변경

    • FROM node:14 as builder
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
ARG APP_MOUNT_URI
ARG API_URI
ARG STATIC_URL
ENV API_URI ${API_URI:-http://localhost:8000/graphql/}
ENV APP_MOUNT_URI ${APP_MOUNT_URI:-/dashboard/}
ENV STATIC_URL ${STATIC_URL:-/dashboard/}
RUN STATIC_URL=${STATIC_URL} API_URI=${API_URI} APP_MOUNT_URI=${APP_MOUNT_URI} npm run build

FROM nginx:stable
WORKDIR /app
COPY ./nginx/default.conf /etc/nginx/conf.d/default.conf
COPY --from=builder /app/build/ /app/
# Add the following lines
COPY ./env.sh .
RUN chmod +x env.sh
CMD ["/bin/bash", "-c", "/app/env.sh && nginx -g \"daemon off;\""]


    아니요 배포 환경에서 saleor-dashboard를 가져오는 API_URI 이미지를 빌드할 수 있습니다.

    메모



    대시보드의 모든 새 버전에서 위의 단계를 반복하지 않기 위해 내가 지정하는 모든 버전/태그/참조에 대해 이 작업을 자동으로 수행하는 gitlab CI/CD 파이프라인을 만들었지만 불행히도 이것은 내가 공유할 수 없는 것입니다.
    TypeScript에서 클래스 및 하위 클래스만 액세스할 수 있는 클래스 필드 또는 메서드를 만드는 방법은 무엇입니까?
    HTML/CSS/JS를 사용하여 뒤집을 수 있는 카드 만들기

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage