如何为Vue和Django配置NGINX?

0qx6xfy6  于 2023-01-29  发布在  Nginx
关注(0)|答案(4)|浏览(158)

我按照这个tutorial创建了一个后端,它工作了。
我做了一个简单的Django REST管理面板来上传图片,它工作了。
然后我创建了Vue前端应用程序,在“VScode远程”中运行npm run serve,它工作了(图像从Django中获取,并由Vue在我的本地主机中设置样式)。
问题是如何在生产VPS服务器上(我指的是vue run build之后的Vue 'dist'文件夹)完成所有这些工作并不明显。我尝试的所有东西都给了我一个404错误或者破坏了Django的管理面板。
以下是我的NGINX设置:

server {
server_name kruglovks.xyz www.kruglovks.xyz;
client_max_body_size 100m;

location = /favicon.ico { access_log off; log_not_found off; }

location /static {
    root /home/kirill/myprojectdir/myproject;
}

location /media {
    root /home/kirill/myprojectdir/myproject;
}

location /dist {
    try_files $uri $uri/ /index.html;
    alias /home/kirill/myprojectdir/myproject;
}

location / {
    include proxy_params;
    proxy_pass http://unix:/run/gunicorn.sock;
}

Vue路由器设置为历史模式。

  • 请,我需要一些关于如何使Vue在此配置中工作的信息。*

P.S.也许有另一种方法可以和Django一起使用Vue?
非常感谢,祝您有愉快的一天!

332nm8kg

332nm8kg1#

这是一个巨大的进步,不是一个404,而是一个空白页称为'frontend'和浏览器拒绝找到css和js。
后来在朋友的帮助下,我可以将nginx设置重新配置为:

server {
listen      80;
server_name kruglovks.xyz www.kruglovks.xyz;
root /home/sasha/myprojectdir/myproject/dist/;
client_max_body_size 100m;

location = /favicon.ico { access_log off; log_not_found off; }

location /static {
    alias /home/sasha/myprojectdir/myproject/static;
}

location /media {
    alias /home/sasha/myprojectdir/myproject/media;
}

location / {
    try_files $uri $uri/ /index.html;
}

location ^~ /api/ {
    include proxy_params;
    proxy_pass http://unix:/run/gunicorn.sock;
}

location ^~ /admin {
     include proxy_params;
     proxy_pass http://unix:/run/gunicorn.sock;
}

现在起作用了!
谢谢你,你救了我几个星期的生命...

tvokkenx

tvokkenx2#

您没有监听任何端口。请注意,在位置/dist中,您还必须更改操作顺序
尝试将默认配置更改为以下配置:

server {
    listen      80;
    server_name kruglovks.xyz www.kruglovks.xyz;
    root        /var/www;
    #... configurations
    location /dist {
        alias /home/kirill/myprojectdir/myproject;
        try_files $uri $uri/ /index.html;

}

vuejs应用程序将在www.kruglovks.xyz/dist中提供服务。

w46czmvw

w46czmvw3#

这是用于生产环境,而不是开发环境。Django应用程序使用Guncorn部署

# settings.py

ALLOWED_HOSTS=['yourdomain.com', 'localhost'] # 'localhost' is optional 
...
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static/')

如果使用“corsheaders”,则添加yourdomain.com

# settings.py

CORS_ALLOWED_ORIGINS = `[`
    "https://yourdomain.com",
    "http://yourdomain.com", # Use this if SSL in not configured
    "http://localhost"
]

更新项目的“urls.py”,并选择应用程序的路径;我的是“app/API/”,因此它将定向到http://yourdomain.com/app/api/

urlpatterns = [
    path('app/api/', include('api.urls')),
    path('app/admin/', admin.site.urls),
]

NGINX配置

# /etc/nginx/sites-available/yourdomain.com.conf
server {
    root /var/www/app/dist; # Vue app production build
    index index.html index.htm index.nginx.debian.html;

    server_name yourdomain.com www.yourdomain.com;

    # Django folder
    location /static/ {
        root /path/to/django/project/folder;
    }

    # Django web requests handled here
    location /app/ {
        # Gunicorn and other configurations
        ...
    }

    # Everything else handled by Vue
    location / {
        try_files /$uri /$uri/ /index.html$args;
    }

    ...
}
gxwragnw

gxwragnw4#

您也可以使用Nginx来服务Vue,并使用另一个Nginx示例作为反向代理来服务Django静态(Gunicorn将服务Django动态内容,即API调用/响应)-您将获得更快的静态内容服务和改进的安全层。
这就是为什么要使用Nginx -〉https://djangoadventures.com/what-is-the-point-of-using-nginx-in-front-of-a-django-application/
这里有一个很好的例子,比如Docker、Django、Postres、Nginx -〉https://testdriven.io/blog/dockerizing-django-with-postgres-gunicorn-and-nginx/
对于Vue - Nginx也可以提供服务。记住settings.py用Cors和允许的主机编辑www.example.com。
如果你想将nginx代理合并到前端,那么你可以通过2个独立的nginx文件来完成,如:

前端文件-〉nginx.conf
server {
  listen 8080;

  location / {
      root /code;
      index index.html index.htm;
      try_files $uri $uri/ /index.html;
  }
}
后端文件-〉默认.conf
upstream backend {
   server backend:8000;
 }

 upstream frontend {
   server frontend:8080;
 }

server {

  listen 80;
  root /usr/share/nginx/html;
  include /etc/nginx/mime.types;

  # Vue frontend.
  location / {
     proxy_pass http://frontend;
  }

  # Django API.
  location /api {
    proxy_pass http://backend;
    autoindex off;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $host;
    proxy_redirect off;
  }

 # Django static assests.
 location /static/ {
    autoindex on;
    alias /code/staticfiles/;
 }

}

Django的停靠文件
# Build from minimal image for speed and security
FROM python:3.10.2-slim-bullseye

ENV WORKDIR=/code
ENV USER=code
ENV PYTHONDONTWRITEBYTECODE=1
ENV PYTHONUNBUFFERED=1

WORKDIR $WORKDIR

COPY build/requirements.txt $WORKDIR

# make static files dirs in order to avoid error from collectstatic
RUN mkdir $WORKDIR/staticfiles && \
    mkdir $WORKDIR/staticfiles/admin && \
    mkdir $WORKDIR/staticfiles/rest_framework

RUN pip install --upgrade pip && \ 
    pip install -r requirements.txt && \
    adduser --system --group $USER && \
    chown -R $USER:$USER $WORKDIR

COPY ./app/backend $WORKDIR
USER $USER

EXPOSE 8000
vue的停靠文件
FROM node:lts-alpine as build-stage

ENV WORKDIR=/code
WORKDIR $WORKDIR

# copy both 'package.json' and 'package-lock.json' (if available) from you project dir
COPY app/frontend/package*.json $WORKDIR/

# install project dependencies
RUN npm install --legacy-peer-deps
COPY app/frontend $WORKDIR
RUN npm run build

# Serve Vue
FROM nginx:alpine as production-stage

RUN mkdir $WORKDIR
COPY app/nginx/nginx.conf /etc/nginx/conf.d/default.conf
COPY --from=build-stage $WORKDIR/dist $WORKDIR

EXPOSE 8080
然后Docker编写
version: "3.5"

volumes:
  postgres_data:
  static_volume:

services:

  backend:
    container_name: django_backend
    env_file:
      - .env
    build:
      context: .
      dockerfile: /Dockerfile.django
    restart: unless-stopped
    # Should go into separate *.sh file but for simplicity - you starting Gunicorn to serve Django 
    command: >
      sh -c "python manage.py wait_for_db &&
      python manage.py migrate --noinput &&
      python manage.py collectstatic --no-input &&
      gunicorn real_estate.wsgi:application --bind 0.0.0.0:8000"
    volumes:
      - static_volume:/code/staticfiles
    depends_on:
      - database

  frontend:
    container_name: vue_frontend
    build:
      context: .
      dockerfile: Dockerfile.vue
    restart: unless-stopped

  nginx:
    container_name: nginx_proxy_server
    build:
      context: .
      dockerfile: Dockerfile.nginx_proxy
    restart: unless-stopped
    ports:
      - 80:80
    volumes:
      - static_volume:/code/staticfiles
    depends_on:
      - frontend
      - backend
    
  database:
    container_name: postgres_db
    build:
      context: .
      dockerfile: Dockerfile.postgres
    volumes:
      - postgres_data:/var/lib/postgresql/data/
    # from .env
    environment:
      - POSTGRES_HOST=${DATABASE_HOST}
      - POSTGRES_USER=${DATABASE_USER}
      - POSTGRES_PASSWORD=${DATABASE_PASSWORD}
      - POSTGRES_DB=${DATABASE_NAME}

相关问题