Como configurar um SPA no carregamento?

Estamos usando Webpack, React, Node.JS, mas acho que essa questão é mais genérica que as tecnologias específicas. Eu posso usar o Webpack para configurar o SPA ao criar o modo de desenvolvimento ou o modo de produção (por exemplo, usando o DefinePlugin).

Como posso configurar um SPA no modo de produção (configurado na compilation) para diferentes ambientes de implementação (por exemplo, teste versus produção)? Por exemplo, essas diferentes implantações falavam com diferentes APIs do servidor de back-end.

De alguma forma, o SPA tem que pegar algum contexto local do servidor como ele está sendo GET’ed pelo navegador. Ou talvez tenhamos de ter um arquivo de configuração personalizado em cada servidor que o SPA possa obter com segurança?

Estamos usando o NodeJS no servidor e este SPA eventualmente será executado como um aplicativo isomórfico para que possa ajudar. Estamos implantando esses aplicativos em imagens do Docker e é fácil configurar seu ambiente na implantação.

Obrigado por qualquer sugestão.

Estamos lutando com os mesmos conceitos agora. A melhor maneira que encontrei para configurar em tempo de execução é usando variables ​​de env (que podem ser configuradas no tempo de construção, mas também substituídas no tempo de execução usando o docker nativo ou qualquer outra ferramenta de orquestração, como ECS ou GKE).

Outra maneira, mais suja, que usamos antes é executar os ajustes de tempo de execução através da diretiva CMD da imagem. Isso não é realmente recomendado, pois torna sua imagem mutável e pode torná-la propensa a erros. No entanto – funciona, e se usado sabiamente pode conseguir o que você quer. Um exemplo simples para isso é replace seu CMD atual que provavelmente se parece um pouco com esse CMD node app.js com algo parecido com isto – bash -c "wget prod.conf && node app.js"

Eu encontrei uma maneira de fazer o que é necessário. É definindo um cookie com detalhes de configuração ao servir o SPA. O SPA pode então ler esse cookie para obter a configuração (e excluir o cookie porque ele não é mais necessário).

Existe um módulo NPM chamado ClientConfig que ajudará a fazer o que descrevi. Ele funciona de maneira muito semelhante a um módulo NPM associado chamado GetConfig, que ajuda na configuração no lado do servidor. ClientConfig: https://github.com/henrikjoreteg/clientconfig

Como usar ClientConfig e GetConfig (separadamente e juntos) é descrito aqui: http://read.humanjavascript.com/ch12-settings-and-configs.html

Isso parece uma solução para mim, embora eu me pergunte sobre quaisquer possíveis problemas de segurança (que é sempre mais complexo do que parece) e se não houver uma abordagem mais fácil. Qualquer comentário ou solução adicional seria apreciado.

Nosso código atual usa o WebPack DefinePlugin, mas não acredito que isso nos permita fazer o que precisamos. Eu também encontrei o ExtendedDefinePlugin que menciona o cliente, mas, novamente, não tenho certeza se é uma solução possível:

https://github.com/ArikMaor/extended-define-webpack-plugin https://www.npmjs.com/package/extended-define-webpack-plugin

O DefinePlugin também é discutido aqui:

Passando Variáveis ​​Dependentes do Ambiente no Webpack

Mas, novamente, não acredito que isso nos permita configurar o cliente SPA com base no contexto de implementação, em vez do contexto de construção.

    Intereting Posts