我想解决问题的方式是将Nginx放入docker容器中,并使用certbot进行验证(已经可以工作),然后根据用户请求的位置反向代理到前端或后端。
![enter image description here](https://istack.dev59.com/LYslH.webp)
当我尝试执行时,出现了问题。
upstream docker-frontend {
server frontend:8081;
}
upstream docker-backend {
server backend:8080;
}
我收到了一个"502 bad gateway"错误。在Stackoverflow上,我找到了一个解决方法,它建议不要纯粹使用8080->8080/tcp或8081->8081/tcp来运行后端或前端,而是将两者都运行在80/tcp上。我还确保将所有容器放在同一个网络中,这似乎有所帮助。
接下来是Nginx配置的编写方式:
upstream docker-frontend {
server frontend:80;
}
upstream docker-backend {
server backend:80;
}
然而,这样做后,我现在有一个完全空白的页面,没有任何内容显示。我可以向您保证,在前端页面(使用Vue 3.0 vite构建)中没有空白页。
nginx.conf
user nginx;
worker_processes 1;
error_log /var/log/nginx/error.log warn;
pid /var/run/nginx.pid;
events {
worker_connections 1024;
}
http {
include /etc/nginx/mime.types;
default_type application/octet-stream;
log_format main '$remote_addr - $remote_user [$time_local] :$request" '
'$status $body_bytes_sent "$http_referer" '
'"$http_user_agent" "$http_x_forwarded_for"';
access_log /var/log/nginx/access.log main;
sendfile on;
keepalive_timeout 65;
upstream docker-frontend {
server frontend:80;
}
upstream docker-backend {
server backend:80;
}
server {
listen 8081;
location / {
proxy_pass http://docker-frontend/;
proxy_redirect off;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Host $server_name;
}
}
server {
listen 8080;
location / {
proxy_pass http://docker-backend/example/;
proxy_redirect off;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Host $server_name;
}
}
server {
listen 80;
listen [::]:80;
server_name www.example.com;
include letsencrypt-acme-challenge.conf;
return 301 https://www.example.com;
}
server {
listen 443 ssl;
listen [::]:443 ssl;
server_name example.com;
ssl_certificate fullchain.pem;
ssl_certificate_key privkey.pem;
ssl_trusted_certificate chain.pem;
return 301 https://www.example.com;
}
server {
listen 443 ssl default_server;
listen [::]:443 ssl default_server;
server_name www.example.com;
ssl_certificate fullchain.pem;
ssl_certificate_key privkey.pem;
ssl_trusted_certificate chain.pem;
root /usr/share/nginx/html/;
location / {
gzip off;
root /usr/share/nginx/html/;
index index.html;
try_files $uri $uri/ /index.html;
add_header Strict-Transport-Security "max-age=31536000; includeSubDomains; preload";
add_header X-Frame-Options DENY;
add_header X-Content-Type-Options nosniff;
add_header X-XSS-Protection "1; mode=block";
add_header Referrer-Policy "origin";
proxy_pass http://docker-frontend/;
proxy_redirect off;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Host $server_name;
}
location /example/ {
add_header Strict-Transport-Security "max-age=31536000; includeSubDomains; preload";
add_header X-Frame-Options DENY;
add_header X-Content-Type-Options nosniff;
add_header X-XSS-Protection "1; mode=block";
add_header Referrer-Policy "origin";
proxy_pass http://docker-backend/example/;
proxy_redirect off;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Host $server_name;
}
}
}
在尝试了解反向代理工作过程中创建的nginx.conf文件,但似乎无法弄清楚为什么仍然显示空白页面。希望能得到任何帮助。
编辑:看起来确实显示index.html,但我没有在页面中看到任何CSS或JavaScript。目前Vue应用程序的Dockerfile配置如下:
Dockerfile
FROM node:lts-alpine as build-stage
RUN mkdir -p /app
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
FROM nginx:stable-alpine as production-stage
COPY ./nginx.conf /etc/nginx/nginx.conf
RUN rm -rf /usr/share/nginx/html/*
COPY --from=build-stage /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
然而,我仍然不确定为什么它不能加载javascript或css。是否有一种特殊的设置Vue反向代理的方式?还是我的nginx.conf没有正确设置?
编辑:即使添加了热重载。
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
它仍然没有显示任何内容,只有一个空白页面。
当我使用
docker exec -it example /bin/sh
检查 Vue 应用程序的 Docker 容器时,在 /html
文件夹中,它显示了 favicon、assets 和 index.html,但是没有 css 或 js 文件夹?但在 assets 文件夹中,有一个奇怪的 index.a6f56555.js
和 index.1212255f.css
。是否还有其他人遇到过这种情况,还是只有我遇到了?编辑:我发现 Vue 没有正确地将自己构建到 Dockerfile 中的
/html
文件夹中,出于某种原因,它只将 index.html 放在那里,而不是 javascript 或 css?
vite.config.js
import { fileURLToPath, URL } from 'url'
import vue from '@vitejs/plugin-vue'
import { defineConfig } from 'vite'
import svgLoader from 'vite-svg-loader'
export default defineConfig({
server: {
port: 8081
},
plugins: [vue(), svgLoader()],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url)),
},
},
publicPath: process.env.NODE_ENV === 'production'
? ''
: '/',
css: {
loaderOptions: {
sass: {
prependData: `@import "@/styles/_variables.scss";`
},
},
preprocessorOptions: {
scss: {
implementation: require('sass'),
additionalData: `
@import "./src/assets/scss/main.scss";
`
}
}
},
base: './'
})
即使按多个来源推荐的设置Vite配置文件以及包含以下内容的package.json文件:
命令,它仍然显示为空白页,有人可以告诉我我做错了什么吗? 因为我现在一点头绪都没有...npm run build & & vite preview --port 8081 --host