ヴィーラ・アンド・ヴェル『アンビエンテ』

14009 ワード
react kubernetes docker テキストリンク
TrabalhoにおけるDiversos Ambientes(ホモログ、ステージング、生産)におけるMaioria Dos Projetos Haje Em DIA sE Juntoコムは、アンビエンテスTemosをPreocupa Media - To O com A proestrutura que o Projeto Vai Invzzar、Al - e m doフレームを利用します.
SegindoネッセネオVaosは、ファルルsobre comoの利用可能なvariは、壮大なエムエムは、projeto que利用者のrejejs、Docker eのak、fazendo umaのConfiguriaのsseを得ます.
AP通信のクリアーo projetoベースcom onpx create-react-app my-app Vamos Criar Tumaパスタonde ficarは、Configura Ses - esデVariの通りとしてvisパラシュートで降下します.environments/base.js
export default {
  api: 'http://localhost:5000/api'
}
O base.js <研究報告>仏法学のためのインフォームドコンソーシアムenvironments/Homolog.js
export default {
  api: 'http://suaapi.hlg.seudominio.com.br/api',
};
environments/Staging.js
export default {
  api: 'http://suaapi.stg.seudominio.com.br/api',
};
environments/Production.js
export default {
  api: 'http://suaapi.prd.seudominio.com.br/api',
};
コンヴァーラとしてのアフィラパラフィン座.environments/index.js
import base from './base';

if (window.ENV) {
  localStorage.setItem('@environment', window.ENV);

  delete window.ENV;
}

const envClient = localStorage.getItem('@environment');
const environments = envClient || 'base';

const env = require('./' + environments).default;

export default {
  ...base,
  ...env,
}
Nesa Configururaの起源についてwindow.ENV リトルビッグプラネット™2でアップロードse existir valor salvamoslocalStorage E・デリタモスwindow.ENV , デポー・レパーパーモスlocalStorage パラグアイとカロエッセ'base' .
AO最終的なda Configuriaは、Criamos Uaノヴァを輸入しますrequire オンデエラInitia o Arquivo Correto Usezandoは、Varienvironments クードドゥコンドルOlocalStorage 王'base' e naはvariとしてexo o exportamosを結論base エenv Iris TeremosとしてのInforma - la - End - End - Le - as - as - Turzzar Mis Tarde
<論説>セグンドードー・コン・コンヴァーラの「美人」としての美意識App.js , ヴェーリ『ヴェーダ』ヴェル『ヴェルヴェ』におけるシンプレメントenv.api Na -パスタの環境についてApp.js
import React from 'react';

import logo from './logo.svg';
import env from './environments';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>{env.api}</p>
      </header>
    </div>
  );
}

export default App;
E .パラファルライアのコンフィギュレーションについてYAML Do Kubernetes、faremos algumas modificapublic .
Primeiro vamos criar um novo arquivoジェトロデトロイトdela.config.js
window.ENV = "Homolog"
DentroデースArquivo Temos馬コンフィギュレーションwindow.ENV レバドゥデトロイトドゥenvironments/index.js Kubernetesを通してのfuturamente vai ser alterada
ロゴAPは、aを批評します、そして、desa arquivo vamos adicionar mais umスクリプトindex.html キューバのパスタ.index.html
<script type="text/javascript" src="%PUBLIC_URL%/config.js"></script>
<研究ノート>アル・アシュヴォーヴォの『プロジェクト・コンセギュール』についてconfig.js APはOビルドビルドprojeto.

コンフィギュレーションは、oをビルドします


アンテデCriarは、ImagemがprojetoのDocker Vamos Primeiro Executar Oをすることをします.
npm run build / yarn build
パラCriaが、o oを想像しますDockerfile フィナーレの歌Dockerfile
# Stage 1
FROM nginx:1.17

# Stage 2
COPY build/ /usr/share/nginx/html
アルムデJ Jは、利用可能なoを造って、foo feito pelo reactjs foriororte、利用します.ヴァレLembrar que o Arquivo.dockerignore nは、oを熟成させてくださいパスタ建設、ポルシェse n o o o ocorrerは、erro quandoのためにエラーメをCriadaに向けます.
SegiIremosパラシュートで降下してください
1 - Criando a imagem do projeto
docker build -t react-docker-aks .

2 - Criação do registro no Docker local
docker run -d -p 5000:5000 --restart=always --name registry registry:2

3 - Criação de tag para referencia da imagem
docker tag react-docker-aks localhost:5000/react-docker-aks

4 - Fazendo o push da imagem para o Docker local
docker push localhost:5000/react-docker-aks
obs重要な点Lembrar queパラExecutar OS Comandos Acimaさん.
e para finalizar criaremos os arquivosYOL KUBERNETES PHASTER CURRESIS O O DOSクラスタの利用deployment.yaml
apiVersion: v1
kind: ConfigMap
metadata:
  name: react-docker-aks
  labels:
    app: react-docker-aks
data:
  config.js: "window.ENV = \"Homolog\";"
---
kind: Deployment
apiVersion: apps/v1
metadata:
  name: react-docker-aks
spec:
  replicas: 1
  selector:
    matchLabels:
      app: react-docker-aks
  template:
    metadata:
      labels:
        app: react-docker-aks
    spec:
      containers:
        - name: react-docker-aks
          image: localhost:5000/react-docker-aks
          imagePullPolicy: Always
          ports:
            - containerPort: 80
          volumeMounts:
            - name: config-js
              mountPath: /usr/share/nginx/html/config.js
              subPath: config.js
      volumes:
        - name: config-js
          configMap:
            name: react-docker-aks
      restartPolicy: Always
---
kind: Service
apiVersion: v1
metadata:
  name: react-docker-aks
spec:
  type: NodePort
  ports:
    - port: 80
      targetPort: 80
      protocol: TCP
      nodePort: 31000
  selector:
    app: react-docker-aks
na criaは、oを得ます.Yilの利用に関する一考察config.js que est na naパスタ公共は、projetoをします.(株)
なしConfigMap 忠誠
data:
  config.js: "window.ENV = \"Homolog\";"
なしDeployment コンテナ容器
volumeMounts:
  - name: config-js
    mountPath: /usr/share/nginx/html/config.js
    subPath: config.js
A A A A Aは、ボリュームをします
volumes:
  - name: config-js
    configMap:
      name: react-docker-aks
フォア・オー・エスコルハMinha Criar TodasとしてのConfiguradeployment.yaml Ma da certo criando os arquivos separados emconfigmap.yaml , deployment.yaml エservice.yaml , デポイスクリードkustomization.yaml パラJuntar Todos eles.
<研究ノート>ユイス・アーキヴォスdeployment.yaml o deployment-staging.yaml エdeployment-production.yaml <高橋潤子>env e criando uma uma outraポルタプロサービスdeployment-staging.yaml
apiVersion: v1
kind: ConfigMap
metadata:
  name: react-docker-aks-stg
  labels:
    app: react-docker-aks-stg
data:
  config.js: "window.ENV = \"Staging\";"
--------
kind: Deployment
apiVersion: apps/v1
metadata:
  name: react-docker-aks-stg
spec:
  replicas: 1
  selector:
    matchLabels:
      app: react-docker-aks-stg
  template:
    metadata:
      labels:
        app: react-docker-aks-stg
    spec:
      containers:
        - name: react-docker-aks-stg
          image: localhost:5000/react-docker-aks
          imagePullPolicy: Always
          ports:
            - containerPort: 80
          volumeMounts:
            - name: config-js
              mountPath: /usr/share/nginx/html/config.js
              subPath: config.js
      volumes:
        - name: config-js
          configMap:
            name: react-docker-aks-stg
      restartPolicy: Always
--------
kind: Service
apiVersion: v1
metadata:
  name: react-docker-aks-stg
spec:
  type: NodePort
  ports:
    - port: 80
      targetPort: 80
      protocol: TCP
      nodePort: 31001
  selector:
    app: react-docker-aks-stg
deployment-production.yaml
apiVersion: v1
kind: ConfigMap
metadata:
  name: react-docker-aks-prd
  labels:
    app: react-docker-aks-prd
data:
  config.js: "window.ENV = \"Production\";"
--------
kind: Deployment
apiVersion: apps/v1
metadata:
  name: react-docker-aks-prd
spec:
  replicas: 1
  selector:
    matchLabels:
      app: react-docker-aks-prd
  template:
    metadata:
      labels:
        app: react-docker-aks-prd
    spec:
      containers:
        - name: react-docker-aks-prd
          image: localhost:5000/react-docker-aks
          imagePullPolicy: Always
          ports:
            - containerPort: 80
          volumeMounts:
            - name: config-js
              mountPath: /usr/share/nginx/html/config.js
              subPath: config.js
      volumes:
        - name: config-js
          configMap:
            name: react-docker-aks-prd
      restartPolicy: Always
--------
kind: Service
apiVersion: v1
metadata:
  name: react-docker-aks-prd
spec:
  type: NodePort
  ports:
    - port: 80
      targetPort: 80
      protocol: TCP
      nodePort: 31002
  selector:
    app: react-docker-aks-prd
パラExecutar o KubernetesなしDockerデスクトップは、Necessを得ます.Ativando o Kubernetes Executando os comandos
1 - Criando o contexto padrão para o cluster do Kubernetes
kubectl config use-context docker-desktop

2 - Criando o serviço Kubernetes
kubectl apply -f deployment.yaml

3 - Serviço do ambiente staging
kubectl apply -f deployment-staging.yaml

4 - Serviço do ambiente production
kubectl apply -f deployment-production.yaml
オックスアンソンチェック・フィカルム・ディオノフは、ナ・ノン・ウルズである
HLG
http://localhost:31000/
STG
http://localhost:31001/
PRD
http://localhost:31002/
Eアッシムseは、Configuraがそうであるprojeto e todasとしてのprojeto e todasを導きます.
プロイート・トード・ポール・アセスレ・イ・ベイキド・ド・メ・ギトゥブ:https://github.com/felipedesenna/react-docker-aks
Object類equals,clone
Swiftをコマンドラインで実行してWebAPIからjsonを取得する