rrod

RROD - React, Redux, Orleans e Dotnet Core

Explorando uma nova arquitetura da web

Este projeto é uma eploration da arquitetura de próxima geração baseada no núcleo do DOTNET e no JavaScript. Quando comecei isso, tudo era muito sangrando, mas mantive esses repositórios à medida que esses produtos amadureciam, e agora tudo está lançado e pronto para a produção!

Aqui está o post introdutório do blog. Há postagens de acompanhamento na minha implementação dos certificados Let's Encrypt, The React, Redux e Frontend baseado em TypeScript, e o back-end baseado em ator de Orleans. Também adicionei o Dockerfiles e implementei esta solução para um cluster Kubernetes. Os arquivos de configuração para isso (menos segredos) estão na pasta de implantação.

Este projeto demonstra muitas tecnologias no contexto:

CLIETERSIDE

• Um front-end da Web com renderização universal/isomórfica, usando o React 16 e Redux, escrito em TypeScript
• UI baseada em bootstrap usando react-bootstrap e bootstrap-sass
• Animações e transições usando ReactransitionGroup e AnimatedJs
• Pipeline de ativos conduzido pelo Webpack 4, com recarregamento do módulo quente durante o desenvolvimento
• Atualizações em tempo real do servidor sobre uma conexão WebSocket Signalr

Front-end da web

• SERVER da web baseado no Aspnet Core 2.1, executando como um executável independente
• Solicitação e uso automáticos de certificados Let's Encrypt TLS na inicialização
• Aspnet JavaScriptServices Middleware Driving Webpack durante o desenvolvimento ( requer o nó versão 8+ )
• Middleware do Aspnet para servir ativos estáticos compactados por GZIP quando possível
• A ASPNET Identity usando um armazenamento de identidade personalizado (baseado em Orleans)
• DistributedCache e DataProtection Services implementados contra o back -end de Orleans
• Autenticação baseada no servidor de identidade 4
• Middleware para proteger contra scripts transversal

Ator back-end

• Back-end baseado em ator com base no Microsoft Orleans 2.0
• Usando armazenamento de tabela para estado persistente (instale o emulador de armazenamento do Azure ou configure uma conexão de armazenamento 'real' para executar este projeto)
• Usando o Orleans Streams sobre uma fila de armazenamento do Azure para empurrar atualizações do back-end para os assinantes
• Demo ator implementando o fornecimento de eventos, reutilizando o padrão Redux no back-end

Implantação baseada em Docker / Kubernetes

• Use o código vs ou o Visual Studio para desenvolvimento usando um ambiente de dotnet local
• Dockerfiles e vs tarefas de código para desenvolvimento local e depuração usando o Docker Community Edition
• Kubernetes YAML Arquivos para implantação em um cluster Kubernetes, como o Azure AKS (adicione seus próprios configurações/segredos)

Execute você mesmo

1. Instale o DOTNet Core 2.1 (ou superior) e NodeJs 8 (ou superior).
2. Crie um arquivo Secrets.json, coloque-o no lugar certo (no Windows, seu %AppData%RoamingMicrosoftUserSecretsrrod-secretssecrets.json , no OSX, está em ~/.microsoft/usersecrets/rrod-secrets/secrets.json ). Uma conta de armazenamento deve ser criada primeiro no Microsoft Azure. No Windows, você pode instalar alternativamente o emulador de armazenamento do Azure e colocar "USEDEVENENCIAMENTESTORAGES = TRUE" para as seqüências de seqüências de conexão de armazenamento. A sequência de conexão SMTP não é realmente necessária. É possível configurar Orleans com outros tipos de cluster que não usam armazenamento do Azure (como o cluster de Kubernetes nativos) com algumas alterações de código. A classe Base Reduxgrain (usada para armazenar usuários e valores de contador) é codificada contra o armazenamento do Azure e realmente precisa do ReduxConnectionString. O arquivo de segredos mínimos contém:

 {
  "ConnectionStrings": {
    "DataConnectionString": "DefaultEndpointsProtocol=https;AccountName=[AZURE STORAGE ACCOUNT];AccountKey=[STORAGE KEY];EndpointSuffix=core.windows.net",
    "ReduxConnectionString": "DefaultEndpointsProtocol=https;AccountName=[AZURE STORAGE ACCOUNT];AccountKey=[STORAGE KEY];EndpointSuffix=core.windows.net",
    "SmtpConnectionString": "Host=[SMTP HOST];UserName=[SMTP USERNAME];Password=[SMTP PASSWORD]"
  },
  "AcmeSettings": {
    "EmailAddress": "[YOUR EMAIL]",
    "PfxPassword": "[A RANDOM PASSWORD]"
  }
}

3. Em SRC/OrleanShost, execute dotnet run
4. No SRC/WebApp, execute npm install (ou yarn ) e depois dotnet run

Usando o código VS ou o Visual Studio, você também pode fazer isso de dentro do IDE.

Isenção de responsabilidade

Este código deve ser considerado experimental. Ele funciona, no entanto, o projeto pode ter arestas e não foi testado minuciosamente. Congratulo -me com o feedback!

- Maarten