DEV Community: Carlos Henrique

Hosting a Static Website on Amazon S3 – A Step-by-Step Guide 🚀

Carlos Henrique — Fri, 21 Feb 2025 14:38:50 +0000

Hosting a Static Website on Amazon S3 – A Step-by-Step Guide

Many times, we need to host a simple website, whether for a portfolio, a landing page, or a static project. Instead of investing in complex servers, Amazon S3 offers a practical and cost-effective solution for this need. In just a few steps, we can configure an S3 bucket to serve a static website accessible via the internet.

In this tutorial, I will walk you through the step-by-step configuration process.

What is Amazon S3?

Amazon S3 (Simple Storage Service) is a cloud-based object storage service provided by AWS. It allows you to store and retrieve any amount of data at any time, ensuring high durability, availability, and scalability. S3 is widely used for backups, content distribution, and simple, efficient static website hosting.

S3 stores data in buckets, which function like "folders" in the cloud. Each bucket can contain individual files (objects) such as images, documents, and web pages. When enabling static hosting, S3 serves these files directly over the internet without the need for traditional servers.

Advantages and Disadvantages of Amazon S3

✅ Advantages:

Low Cost: You only pay for storage and data transfer, with no fixed costs.
High Availability: AWS's robust infrastructure ensures reliable access to the site.
Scalability: Can handle a high number of requests without the need to configure additional servers.
Easy Configuration: Your website can be live in just a few steps without requiring web servers.
Integration with Other AWS Tools: Such as CloudFront for CDN and Route 53 for custom domains.

❌ Disadvantages:

No Support for Dynamic Applications: S3 is only suitable for static websites (HTML, CSS, and plain JavaScript).
Permission Management: You need to configure permissions correctly to ensure public access to the site.
Unfriendly Default URL: The link generated by S3 can be long and complex, requiring a custom domain for better user experience.
No Native HTTPS: To enable HTTPS, you need to configure Amazon CloudFront or another CDN service.

Step 1: Creating an S3 Bucket

Log in to the AWS Management Console.
Go to the S3 service.
Click on Create bucket.
Choose a unique name for your bucket (e.g., mywebsite-example).
Select a region close to your target audience.
Uncheck the Block all public access option to allow your site to be publicly accessible.
Confirm the settings and click Create bucket.

Step 2: Enabling Static Website Hosting

In S3, click on the bucket you created.
Go to the Properties tab.
Scroll down to Static website hosting and click Edit.
Select Enable.
In the Index document field, enter index.html.
Click Save changes.

This makes S3 serve index.html as the homepage of your site.

Step 3: Making Files Public

Go to the Permissions tab of your bucket.
Scroll to Bucket policy and click Edit.
Paste the following policy to allow public access:

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::mywebsite-example/*"
    }
  ]
}

Replace mywebsite-example with your bucket name.
Click Save changes.

Now, anyone can access your bucket’s files via HTTP.

Step 4: Uploading Your Files

Go to the Objects tab in S3.
Click Upload.
Select your website files (index.html, styles.css, etc.).
Click Upload.

Step 5: Accessing Your Website

After completing the steps above, your website will be available at a link similar to:

http://mywebsite-example.s3-website-us-east-1.amazonaws.com

Replace mywebsite-example and the region as needed.

Final Thoughts

Now your website is live! To make access more professional, you can configure CloudFront as a CDN and use a custom domain with Route 53.

If you enjoyed this tutorial, feel free to leave a comment. If you have any suggestions, I’d love to discuss them here! 🚀

Hospedando seu site estático no Amazon S3 🚀

Carlos Henrique — Fri, 21 Feb 2025 14:33:50 +0000

Muitas vezes, precisamos hospedar um site simples, seja para um portfólio, uma landing page ou um projeto estático. Em vez de investir em servidores complexos, o Amazon S3 oferece uma solução prática e de baixo custo para essa necessidade. Com poucos passos, podemos configurar um bucket no S3 para servir um site estático acessível via internet.

Neste tutorial, vou explorar com vocês o processo de configuração passo a passo.

O que é o Amazon S3?

O Amazon S3 (Simple Storage Service) é um serviço de armazenamento de objetos na nuvem oferecido pela AWS. Ele permite armazenar e recuperar qualquer quantidade de dados a qualquer momento, garantindo alta durabilidade, disponibilidade e escalabilidade. O S3 é amplamente utilizado para armazenar backups, distribuir conteúdo e hospedar sites estáticos de maneira simples e eficiente.

O S3 armazena dados em buckets, que funcionam como "pastas" na nuvem. Cada bucket pode conter arquivos individuais (objetos), como imagens, documentos e páginas web. Ao ativar a hospedagem estática, o S3 passa a servir esses arquivos diretamente pela internet, sem necessidade de servidores tradicionais.

Vantagens e Desvantagens do Amazon S3

✅ Vantagens:

Baixo Custo: Você paga apenas pelo armazenamento e transferência de dados, sem custos fixos.
Alta Disponibilidade: Infraestrutura robusta da AWS garante acesso confiável ao site.
Escalabilidade: Capaz de lidar com um grande número de acessos sem a necessidade de configurar servidores adicionais.
Fácil Configuração: Em poucos passos, seu site pode estar no ar sem necessidade de servidores web.
Integração com Outras Ferramentas AWS: Como CloudFront para CDN e Route 53 para domínios personalizados.

❌ Desvantagens:

Sem Suporte para Aplicações Dinâmicas: O S3 é adequado apenas para sites estáticos (HTML, CSS, JavaScript puro).
Gerenciamento de Permissões: É necessário configurar corretamente as permissões para garantir acesso público ao site.
URL Padrão Pouco Amigável: O link gerado pelo S3 pode ser longo e complexo, sendo necessário um domínio personalizado para melhorar a experiência do usuário.
Sem HTTPS Nativo: Para ter HTTPS, é necessário configurar o Amazon CloudFront ou outro serviço de CDN.

Passo 1: Criando um Bucket no S3

Acesse o AWS Management Console.
Vá para o serviço S3.
Clique em Criar bucket.
Escolha um nome único para o bucket (ex:meusite-exemplo).
Escolha uma região próxima ao seu público-alvo.
Desmarque a opção "Bloquear todo o acesso público" para permitir que seu site seja acessado publicamente.
Confirme a configuração e clique em Criar bucket.

Passo 2: Habilitando o Bucket para Hospedagem de Site Estático

No S3, clique no bucket que você criou.
Vá para a aba Propriedades.
Role até a seção Hospedagem de site estático e clique em Editar.
Selecione a opção Habilitar.
No campo Documento de índice, insira index.html.
Clique em Salvar alterações.

Isso fará com que o S3 trate index.html como a página inicial do seu site.

Passo 3: Tornando os Arquivos Públicos

Vá para a aba Permissões do bucket.
Role até Política do bucket e clique em Editar.
Cole a seguinte política para permitir acesso público:

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::meusite-exemplo/*"
    }
  ]
}

Substitua meusite-exemplo pelo nome do seu bucket.
Clique em Salvar alterações.

Agora, qualquer pessoa poderá acessar os arquivos do seu bucket via HTTP.

Passo 4: Fazendo o Upload dos Arquivos

Volte para a aba Objetos no S3.
Clique em Fazer upload.
Selecione os arquivos do seu site (index.html, styles.css, etc.).
Clique em Fazer upload.

Passo 5: Acessando o Site

Após seguir os passos acima, seu site estará disponível em um link semelhante a:

http://meusite-exemplo.s3-website-us-east-1.amazonaws.com

Substitua meusite-exemplo e a região conforme necessário.

Considerações Finais

Agora seu site está no ar! Para tornar o acesso mais profissional, você pode configurar um CloudFront para CDN e usar um domínio personalizado com o Route 53.

Se você gostou deste tutorial, pode comentar e se tiver sugestões vou adorar discutir sobre aqui nos comentários! 🚀

Publishing a Private Package on GitHub Packages

Carlos Henrique — Thu, 12 Sep 2024 00:13:06 +0000

Recently at work, I encountered the need to publish a package privately. After evaluating some options, I realized that the best way to do this was by using GitHub Packages.

What is GitHub Packages?

GitHub Packages allows you to store packages of various types (such as npm, Maven, Docker, etc.) directly on GitHub. You can make them public or private, depending on your project’s needs. You can learn more here.

Step 1: Setting up the project and requirements

First, you need to have a repository on GitHub where your package will be stored. To ensure the package is private, make sure the repository is private.

Step 2: Creating your package

Creating the package.json: Replace <your-user-or-organization> with the desired user or organization.

npm init --scope=@<your-user-or-organization>

This will generate a package.json file with the name field already formatted with the scope. Using my GitHub profile as an example:

{
  "name": "@carloshendvpm/my-package",
  "version": "1.0.0",
  "description": "My private package on GitHub Packages",
  ...
}

Step 3: Configuring the registry for GitHub Packages

Now, you need to ensure that npm knows you want to publish this package to GitHub Packages, not to the public npm registry. To do this, add the publishConfig field to your package.json:

"publishConfig": {
  "registry": "https://npm.pkg.github.com/"
}

This tells npm to use GitHub Packages as the publication destination. Your package.json should now look like this:

{
  "name": "@carloshendvpm/my-package",
  "version": "1.0.0",
  "type": "module",
  "repository": {
    "url": "https://github.com/carloshendvpm/my-package.git"
  },
  "dependencies": {
    ...
  },
  "devDependencies": {
    ...
  },
  "publishConfig": {
    "registry": "https://npm.pkg.github.com/"
  }
}

Step 4: Using GitHub Actions to publish the package

Create a directory named .github/workflows inside your project. Inside the workflows directory, create a file named publish.yml with the following content:

name: Publish package to GitHub Packages
on:
  release:
    types: [published]
  workflow_dispatch:
jobs:
  build:
    runs-on: ubuntu-latest
    permissions:
      contents: read
      packages: write
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v3
        with:
          node-version: '20.x'
          registry-url: 'https://npm.pkg.github.com'
          scope: '@carloshendvpm'
      - name: Install dependencies
        run: npm install
      - name: Publish package
        run: npm publish --access restricted
        env:
          NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

This action will only be executed when a new release is created. You can modify this behavior as per your preferences. I’ve also used the workflow_dispatch event, which allows you to manually trigger the action from GitHub's interface. It's important to note that the GITHUB_TOKEN is automatically generated by GitHub. You can learn more about it here.

Step 5: Creating the new release

Fill in the tag information and create the new release. This will trigger the action to execute.

Step 6: Using the package in your projects

Before installing the package, follow these steps:

Create a personal access token on GitHub. This token will allow you to authenticate with the GitHub API and install your package. Go to Settings / Developer Settings / Personal Access Tokens and generate a new token with read permissions.
In the project where the package will be used, create a .npmrc file in the root directory.
Add the following configuration to your .npmrc file, replacing <GITHUB_TOKEN> with the token you generated:

//npm.pkg.github.com/:_authToken=<GITHUB_TOKEN>
@organizationName:registry=https://npm.pkg.github.com

Now, you can install the package in your project using:

Via package.json:

"@carloshendvpm/my-package": "1.0.0"

Via terminal:

npm install @carloshendvpm/my-package@1.0.0

Conclusion

I hope this was helpful in some way. Soon, I plan to share a complete guide on creating a package using the Svelte Library. If you have any suggestions or notice any mistakes, feel free to comment or correct me. German version soon...

Como publicar um package npm de forma privada utilizando Github Packages

Carlos Henrique — Thu, 12 Sep 2024 00:05:16 +0000

Recentemente, no meu trabalho, me deparei com a seguinte necessidade: publicar um pacote de maneira privada. Depois de avaliar algumas possibilidades, percebi que a melhor forma de fazer isso seria utilizando o GitHub Packages.

O que é o GitHub Packages?

O GitHub Packages permite que você armazene pacotes de diferentes tipos (como npm, Maven, Docker, etc.) diretamente no GitHub. Você pode torná-los públicos ou privados, dependendo da necessidade do seu projeto. Você pode conferir mais informações aqui.

Passo 1: Configurando o projeto e necessidades

Primeiro, é necessário que você tenha um repositório no GitHub onde o seu pacote será armazenado. Para garantir que o pacote seja privado, certifique-se de que o repositório é privado.

Passo 2: Criando o seu pacote

Criando o package.json: Substitua <seu-usuario-ou-organizacao> pelo usuário ou organização desejada.

npm init --scope=@<seu-usuario-ou-organizacao>

Isso vai gerar um package.json com o campo name já formatado com o escopo. Utilizando o meu perfil do GitHub como exemplo:

{
  "name": "@carloshendvpm/meu-pacote",
  "version": "1.0.0",
  "description": "Meu pacote privado no GitHub Packages",
  ...
}

Passo 3: Configurando o registro para GitHub Packages

Agora, é preciso garantir que o npm saiba que você deseja publicar esse pacote no GitHub Packages, e não no registro público do npm. Para isso, adicione o campo publishConfig ao seu package.json:

"publishConfig": {
  "registry": "https://npm.pkg.github.com/"
}

Isso informa ao npm que ele deve usar o GitHub Packages como destino de publicação. O seu package.json deve ficar assim:

{
  "name": "@carloshendvpm/meu-pacote",
  "version": "1.0.0",
  "type": "module",
  "repository": {
    "url": "https://github.com/carloshendvpm/meu-pacote.git"
  },
  "dependencies": {
    ...
  },
  "devDependencies": {
    ...
  },
  "publishConfig": {
    "registry": "https://npm.pkg.github.com/"
  }
}

Passo 4: Utilizando GitHub Actions para publicar o pacote

Crie um diretório chamado .github/workflows dentro do seu projeto. E, dentro do diretório workflows, crie um arquivo publish.yml com o seguinte conteúdo:

name: Publish package to GitHub Packages
on:
  release:
    types: [published]
  workflow_dispatch:
jobs:
  build:
    runs-on: ubuntu-latest
    permissions:
      contents: read
      packages: write
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '20.x'
          registry-url: 'https://npm.pkg.github.com'
          scope: '@carloshendvpm'
      - name: Install dependencies
        run: npm install
      - name: Publish package
        run: npm publish --access restricted
        env:
          NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

Essa action será executada na adição de uma nova release. Isso pode ser alterado de acordo com sua preferência. Além disso, utilizei o workflow_dispatch, que permite executar essa action diretamente da interface do GitHub, manualmente. É importante salientar que o GITHUB_TOKEN é gerado automaticamente pelo GitHub. Você pode conferir mais sobre isso aqui.

Passo 5: Criar a nova release

Preencha as informações de tag e crie a nova release. Isso acionará a execução da action.

Passo 6: Usando o pacote nos seus projetos

Antes de instalar o pacote, siga estas etapas:

Crie um token de acesso pessoal no GitHub para autenticação com a API do GitHub e instalação do seu pacote. Vá em Configurações / Configurações de Desenvolvedor / Token de Acesso Pessoal e gere um novo token com a permissão de leitura.
No projeto onde o pacote será utilizado, crie um arquivo chamado .npmrc na raiz do projeto.
Adicione a seguinte configuração no seu arquivo .npmrc, substituindo <GITHUB_TOKEN> pelo token gerado anteriormente:

//npm.pkg.github.com/:_authToken=<GITHUB_TOKEN>
@organizationName:registry=https://npm.pkg.github.com

Agora, você já pode instalar o pacote no seu projeto utilizando:

Via package.json:

"@carloshendvpm/meu-pacote": "1.0.0"

Via terminal:

npm install @carloshendvpm/meu-pacote@1.0.0

Conclusão

Espero ter ajudado de alguma forma. Em breve, pretendo trazer um tutorial completo sobre a criação de um package utilizando a Svelte Library. Se tiver alguma sugestão, não hesite em comentar ou me corrigir caso tenha notado algum erro.