Skip to content
main
Switch branches/tags
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

GitHub language count Repository size Siga no Twitter GitHub last commit License Stargazers

Pré-requisitos

Desde que você tenha instalado no seu computador Docker, o VSCode e a extensão Remote-Containers, não tem pré-requisito algum, é só rodar o projeto! 😲

Instruções:

# Clone este repositório
$ git clone https://github.com/pedrorenan/js-expert-week.git

# Acesse a pasta do projeto no terminal/cmd
$ cd js-expert-week

# Abra o projeto com o VSCode
$ code .

Quando o VSCode abrir você verá uma mensagem informando que foram detectadas as configurações necessárias para que a extensão Remote-Containers faça a mágica acontecer.

Remote Containers Dialog

Clique em "Reopen in Container". O VSCode vai reiniciar e é só aguardar o ambiente ficar pronto para você. Pode demorar um pouco na primeira vez se você nunca tiver feito o download dos containers necessários 🕐. Mas vale a pena!

Quando finalizar, você terá um terminal dentro do VSCode que já está dentro do container. Tudo integrado! Tipo Inception mesmo 🍿.

💡 Tudo que você executar nesse terminal será executado dentro do container apenas!

Eu escrevi um post sobre VSCode e Remote-Containers, se quiser ler um pouco mais sobre o assunto, é só acessar "Em busca da independência para o ambiente de desenvolvimento".

Aula 01

#execute o script que gera os vídeos em vários formatos
$ sh script.sh

🕐 Pode ser que demore um pouco, depende do seu ambiente. Verifique as pastas que vão sendo criadas em assets/timeline.

Aula 02

  1. Use dois terminais dentro do VSCode.
#Terminal 1
#execute o CDN
$ npm run assets
#Terminal 2
#execute a aplicação
$ npm run dev
  1. No seu navegador de internet, acesse http://localhost:8080 ou http://127.0.0.1:8080

  2. Clique na miniatura da Semana JS EXPERT e aperte o play!

Aula 03

Você precisa de uma conta AWS e de Access Key ID e Secret access key, com permissões para S3 e CloudFront, para configurar a aws cli:

#configure a aws cli
$ aws configure

# Digite a Access Key ID
$ AWS Access Key ID []:xxxxxxxxxxxxxxxxxxxx

# Digite a Secret Access Key
$ AWS Secret Access Key []: xxxxxxxxxxxxxxxxxxxx

# Digite o nome da região que irá utilizar na AWS
$ Default region name []: us-east-1

# Digite o formato de saída
$ Default output format []: json

Você precisa de uma conta Serverless para realizar o deploy automático:

#faça o login na sua conta Serverless
$ sls login

Depois de serguir as instruções e estar autenticad@, você fará o deploy automático do CDN e da aplicação:

#acesse a pasta do CDN
$ cd assets

#faça o deploy
$ sls deploy

#você deverá receber uma infomação como essa ao final do deploy
bucket:          website-hericxb
distributionUrl: https://dsf7go5wikho4.cloudfront.net
bucketUrl:       http://website-hericxb.s3-website.us-east-1.amazonaws.com
url:             https://dsf7go5wikho4.cloudfront.net

Copie a url exibida na mensagem de sucesso que você recebeu e coloque na linha 5 do arquivo /public/manifest.json e salve o arquivo.

5 "production": "https://dsf7go5wikho4.cloudfront.net",

Faça o deploy da aplicação:

#retorne um nível 
$ cd ..

#acesse a pasta da aplicação
$ cd public

#faça o deploy
$ sls deploy

#você deverá receber uma infomação como essa ao final do deploy
bucket:          website-erxflbt
distributionUrl: https://d1ax6alpfo7qd2.cloudfront.net
bucketUrl:       http://website-erxflbt.s3-website.us-east-1.amazonaws.com
url:             https://d1ax6alpfo7qd2.cloudfront.net

Aguarde uns 10 minutos. Confira se o deploy está pronto no painel do CloudFront da AWS. Para visualizar o projeto, use a url exibida na mensagem de sucesso seguida de /index/index.html, como no exemplo abaixo:

https://d1ax6alpfo7qd2.cloudfront.net/index/index.html

IMPORTANTE

💸 Não esqueça de parar suas aplicações para evitar custos desnecessários. Tem uma forma bem simples de fazer isso:

#acesse a pasta do CDN
$ cd assets

#remova a aplicação
$ sls remove

#retorne um nível 
$ cd ..

#acesse a pasta da aplicação
$ cd public

#remova a aplicação
$ sls remove

💵 Sempre confira o painel do CloudFront na AWS para verificar se as aplicações não estão disponíveis e gerando custos.

About

Repoitório utilizado durante a Semana JS Expert com Erick Wendel

Resources

License

Releases

No releases published

Packages

No packages published

Languages