title: Django static files can't be loaded on the google compute engine
body: <p>I have run the python manage.py runserver command on my computer(windows 10) and it work but when I put all of codes on the google cloud platform compute engine(Ubuntu 16) and run the same command it shows all of the static files are not found. Do anyone knows how to fix it? </p>
  
  <p>settings.py (ignore some irrelative parts)</p>
  
  <pre><code>import os
  
  # Build paths inside the project like this: 
  os.path.join(BASE_DIR, ...)
  BASE_DIR = 
  os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
  
  ALLOWED_HOSTS = ['*']
  
  
  # Application definition
  
  INSTALLED_APPS = [
      'django.contrib.admin',
      'django.contrib.auth',
      'django.contrib.contenttypes',
      'django.contrib.sessions',
      'django.contrib.messages',
      'django.contrib.staticfiles',
      'rest_framework',
      'rest_framework_swagger',
  
      'restaurants',  # 餐廳APP
      'webpack_loader',  # 整合vue和django套件
      'corsheaders'  # 處理跨域請求套件
  
      # 'gunicorn',  # 部署用
  ]
  
  MIDDLEWARE = [
      'django.middleware.security.SecurityMiddleware',
      'django.contrib.sessions.middleware.SessionMiddleware',
      'corsheaders.middleware.CorsMiddleware',
      'django.middleware.common.CommonMiddleware',
      'django.middleware.csrf.CsrfViewMiddleware',
      'django.contrib.auth.middleware.AuthenticationMiddleware',
      'django.contrib.messages.middleware.MessageMiddleware',
      'django.middleware.clickjacking.XFrameOptionsMiddleware',
     'django.middleware.clickjacking.XFrameOptionsMiddleware',
  ]
  
  
  ROOT_URLCONF = 'foodies.urls'
  
  TEMPLATES = [
  {
      'BACKEND': 
      'django.template.backends.django.DjangoTemplates',
       'DIRS': [os.path.join(BASE_DIR, '../static')],
      'APP_DIRS': True,
      'OPTIONS': {
          'context_processors': [
              'django.template.context_processors.debug',
              'django.template.context_processors.request',
              'django.contrib.auth.context_processors.auth',
  
   'django.contrib.messages.context_processors.messages',
           ],
       },
   },
  ]
  
  WSGI_APPLICATION = 'foodies.wsgi.application'
  
  STATIC_URL = '/static/'
  
  STATIC_ROOT = os.path.join(BASE_DIR, 'static')
  
   STATICFILES_DIRS = (
      os.path.join(BASE_DIR, '../frontend/dist'),
  )
  
  WEBPACK_LOADER = {
      'DEFAULT': {
      'BUNDLE_DIR_NAME': '',
      'STATS_FILE': os.path.join(BASE_DIR, '../webpack- 
     stats.json'),
      }
  }
  
  
  CORS_ALLOW_CREDENTIALS = True
  CORS_ORIGIN_ALLOW_ALL = True
  # 允許所有header請求
  CORS_ALLOW_HEADERS = ('*')
  </code></pre>
  
  <p>static files path
  <a href="https://i.stack.imgur.com/YskR1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YskR1.png" alt="enter image description here"></a></p>
  
  <p>index.html
  <a href="https://i.stack.imgur.com/7oYou.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7oYou.png" alt="enter image description here"></a></p>
  
  <p>url.py</p>
  
  <pre><code>from django.contrib import admin
  from django.urls import path, include
  from rest_framework_swagger.views import get_swagger_view
  from django.views.generic import TemplateView
  
  
  schema_view = get_swagger_view(title='Pastebin API')
  
  urlpatterns = [
      path('admin/', admin.site.urls),
      path('api/', include('restaurants.urls')),
      path('api-auth/', include('rest_framework.urls')),
      path('api-view/', schema_view),
      path('', TemplateView.as_view(
          template_name="index.html"), name='index')
  ]
  </code></pre>
  
  <p>chrome error messages
  <a href="https://i.stack.imgur.com/ftCnG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ftCnG.png" alt="enter image description here"></a></p>
  
  <p>compute engine status
  <a href="https://i.stack.imgur.com/V1Irf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/V1Irf.png" alt="enter image description here"></a></p>