Static Files – Arquivos Estáticos

Voltar para página principal do blog

Todas as aulas desse curso

Aula 05                Aula 07

Redes Sociais:

Conecte-se comigo!

LinkedIn: Fique à vontade para me adicionar no LinkedIn.

Ao conectar-se comigo, você terá acesso a atualizações regulares sobre desenvolvimento web, insights profissionais e oportunidades de networking no setor de tecnologia.

GitHub: Siga-me no GitHub para ficar por dentro dos meus projetos mais recentes, colaborar em código aberto ou simplesmente explorar os repositórios que eu contribuo, o que pode ajudar você a aprender mais sobre programação e desenvolvimento de software.

Recursos e Afiliados

Explorando os recursos abaixo, você ajuda a apoiar nosso site.

Somos parceiros afiliados das seguintes plataformas:

• Hostinger – Hospedagem web acessível e confiável.
• Digital Ocean – Infraestrutura de nuvem para desenvolvedores.
• One.com – Soluções simples e poderosas para o seu site.

Código da aula: Github

Educação e Networking

Amplie suas habilidades e sua rede participando de cursos gratuitos e comunidades de desenvolvedores:

• Digital Innovation One – Cursos gratuitos com certificado.
• Workover – Aprenda Python3 gratuitamente.
• Comunidades de desenvolvedores para networking:
  • Impulser
  • Google Developer Groups
  • Comunidades.tech

Canais do Youtube

Explore nossos canais no YouTube para uma variedade de conteúdos educativos e de entretenimento, cada um com um foco único para enriquecer sua experiência de aprendizado e lazer.

Toti

Toti: Meu canal pessoal, onde posto clips artesanais de músicas que curto tocar, dicas de teoria musical, entre outras coisas.

Lofi Music Zone Beats

Lofi Music Zone Beats: O melhor da música Lofi para estudo, trabalho e relaxamento, criando o ambiente perfeito para sua concentração.

Backing Track / Play-Along

Backing Track / Play-Along: Acompanhe faixas instrumentais para prática musical, ideal para músicos que desejam aprimorar suas habilidades.

Código Fluente

Código Fluente: Aulas gratuitas de programação, devops, IA, entre outras coisas.

Putz!

Putz!: Canal da banda Putz!, uma banda virtual, criada durante a pandemia com mais 3 amigos, Fábio, Tatá e Lula.

Vocal Techniques and Exercises

Vocal Techniques and Exercises: Melhore suas técnicas vocais com exercícios práticos e dicas de especialistas em canto.

PIX para doações

PIX Nubank

Static Files – Arquivos Estáticos

Quando se trata de trabalhar com arquivos estáticos, você pode usar um CDN(Content Delivery Network ou Rede de Distribuição de Conteúdo), ou você pode querer você mesmo servir os arquivos estáticos do projeto. 

O Django não suporta servir arquivos estáticos em produção.

Os static files funcionam parecido com o template, não é exatamente igual, mas é parecido.

Quando é dito servir arquivos estáticos, quero dizer que sua aplicação realmente irá lidar com arquivos estáticos ( imagens, JavaScript, ou CSS) de um jeito ou de outro e o django em si não faz isso, como disse antes, você provavelmente precisará de algo como: Apache, ou um Amazon Web Services, etc.

Quando desenvolvendo localmente, precisamos de uma forma de lidar com esses arquivos, nossa aplicação precisa enxergar nosso css personalizado, nosso javascript personalizado.

Arquivos estáticos servidos pelo runserver

Durante o desenvolvimento, usando o django.contrib.staticfiles, os arquivos estáticos serão servidos pelo runserver quando DEBUG está definido como True  lá no src/e_commerce/settings.py

Este método é ineficiente e inseguro, por isso, é impróprio para produção.

O que iremos fazer é configurar dentro do nosso ambiente virtual, criado para esse projeto, uma pasta chamada static_cdn.

Crie a pasta static_cdn no mesmo nível da pasta src, ou seja, na pasta onde criou o ambiente virtual do projeto.

Essa pasta vai emular o comportamento do nosso servidor de arquivos estáticos.

Abra o src/e_commerce/settings.py, no final do arquivo, logo abaixo do STATIC_URL = ‘/static/‘ insira:

STATICFILES_DIRS = [
     os.path.join(BASE_DIR, "static_local")
]

A pasta static_local ainda não existe, vamos criar já já. Ela irá servir os arquivos estáticos do projeto, mas, só localmente, na nossa máquina em que estamos desenvolvendo o projeto.

Ela não é a pasta que vai servir a aplicação para o usuário final, ou seja, em produção.

Crie agora pasta src/static_local, no mesmo nível das pastas e_commerce e template.

Agora, em src/e_commerce/settings.py, no final do arquivo, abaixo do:

STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static_local")
]

Insira:

STATIC_ROOT = os.path.join(os.path.dirname(BASE_DIR), "static_cdn", "static_root")

Ou seja:

STATIC_ROOT =  src/static_cdn/static_root

BASE_DIR é a pasta onde está o manage.py, ou seja, a pasta src, isso localmente.

No meu github, a pasta equivalente a src local é a pasta do projeto:

https://github.com/toticavalcanti/django_ecommerce

STATIC_ROOT é a pasta que vai realmente servir os estáticos do projeto em produção.

Novamente no src/e_commerce/settings.py, no final do arquivo, abaixo do:

STATIC_ROOT = os.path.join(os.path.dirname(BASE_DIR), "static_cdn", "static_root")

Acrescente:

MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(os.path.dirname(BASE_DIR), "static_cdn", "media_root")

Ou seja:

MEDIA_ROOT =  src/static_cdn/media_root

Em src/e_commerce/urls.py, modifique para que fique assim:

from django.conf import settings
from django.conf.urls.static import static

from django.contrib import admin
from django.urls import path

from .views import home_page, about_page, contact_page, login_page, register_page

urlpatterns = [
	path('', home_page),
	path('about/', about_page),
	path('contact/', contact_page),
        path('login/', login_page),
        path('register/', register_page),
	path('admin/', admin.site.urls),
]
if settings.DEBUG:
    urlpatterns = urlpatterns + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
    urlpatterns = urlpatterns + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

Agora crie src/static_local/css/main.css e dentro coloque:

body {
    color: #ccc;
}

Execute o comando:

python manage.py collectstatic

Emulando nosso servidor CDN

Observe que o static_local/css/main.css foi compiado para static_cdn/css/main.css emulando nosso servidor CDN, o servidor de arquivos estáticos em produção, que é separado do nosso servidor django.

Servidores separados

Os servidores são sempre separados, o servidor de estáticos em produção pode ser por exemplo: AWS S3, Apache, Cloudflare, MaxCDN, etc.

A pasta static_cdn tá emulando um desses serviços acima.

Vamos criar agora a pasta de imagens: src/static_local/img/

Pesquise uma imagem qualquer na internet e salve dentro dessa pasta.

Execute novamente o comando:

python manage.py collectstatic

Veja que o static_local/img/imagem.png foi compiado para static_cdn/img/eCommerce.jpeg

Vamos mudar nossa src/template/home_page.html coloque o conteúdo abaixo.

{% load static %}
<!doctype html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
        <link rel='stylesheet' href='{% static "css/main.css" %}'>
    </head>
    <body>
        <div class='text-center'>
            <h1>{{ title }}</h1>
            <p>{{ content }}</p>
        </div>
        <div class='container'>
            <div class='row'>
                <div class='col'>
                    <img src="{% static 'img/eCommerce.jpeg' %}" class='img-fluid' />
                    <p>{{ content }}</p> 
                </div>
            </div>
            {% if request.user.is_authenticated %}
            <div class='row'>
                <div class='col'>
                    <h1>Premium</h1>
                    <p>{{ premium_content }}</p>
                </div>
            </div>
            {% endif %}
        </div>

        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    </body>
</html>

Acessem a home page: 127.0.0.1:8000 e veja a imagem lá.

Por hora é isso pessoal.

Aula 05                Aula 07

Todas as aulas desse curso

Voltar para página principal do blog

Curta a página do Código Fluente no Facebook
https://www.facebook.com/Codigofluente-338485370069035/

Vou deixar meu link de referidos na digitalocean pra vocês.

Quem se cadastrar por esse link, ganha $100.00 dólares de crédito na digitalocean:

Digital Ocean

Esse outro link é da one.com:

One.com

Para baixar o código como está até agora, acesse o link abaixo:
https://github.com/toticavalcanti/django_ecommerce/tree/static_files

Obrigado, até a próxima e bons estudos. 😉