上周入职新公司,公司用的 后端服务是 Laravel,前端是 Nuxt,我个人本地开发环境一直是 Laradock。所以就想在 laradock 中跑这两个服务。但是中间出了一点问题,困扰了好几天(太菜.....)。但是结局是完美的。总算是解决了,接下来还原一下步骤。
编辑本机 host 文件
127.0.0.1 api.ppp.test # 后端接口地址
127.0.0.1 www.ppp.test # Nuxt 前端地址
laradock Nginx 配置文件 (后端服务)
server {
listen 80;
listen [::]:80;
# For https
# listen 443 ssl default_server;
# listen [::]:443 ssl default_server ipv6only=on;
# ssl_certificate /etc/nginx/ssl/default.crt;
# ssl_certificate_key /etc/nginx/ssl/default.key;
server_name api.ppp.local;
root /var/www/ppp/public;
index index.php index.html index.htm;
location / {
try_files $uri $uri/ /index.php$is_args$args;
}
location ~ \.php$ {
try_files $uri /index.php =404;
fastcgi_pass php-upstream;
fastcgi_index index.php;
fastcgi_buffers 16 16k;
fastcgi_buffer_size 32k;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
#fixes timeouts
fastcgi_read_timeout 600;
include fastcgi_params;
}
location ~ /\.ht {
deny all;
}
location /.well-known/acme-challenge/ {
root /var/www/letsencrypt/;
log_not_found off;
}
}
Nuxt 前端 Nginx ,配置 proxy_pass 到 nuxtjs 容器中
server {
listen 80;
listen [::]:80;
# For https
# listen 443 ssl default_server;
# listen [::]:443 ssl default_server ipv6only=on;
# ssl_certificate /etc/nginx/ssl/default.crt;
# ssl_certificate_key /etc/nginx/ssl/default.key;
server_name www.ppp.local;
index index.html index.htm;
location / {
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-Proto $scheme;
proxy_read_timeout 1m;
proxy_connect_timeout 1m;
proxy_pass http://nuxtjs:9999; # Nuxt 服务
}
}
新建 nuxtjs 容器
### nuxtjs #######################################################
nuxtjs:
build:
context: ./nuxt
environment:
- HOST=0.0.0.0
ports:
- "9999:9999"
volumes:
- ${APP_CODE_PATH_HOST}:${APP_CODE_PATH_CONTAINER}${APP_CODE_CONTAINER_FLAG}
networks:
- backend
- frontend
tty: true
在 Laradock 根目录 新建 nuxt 文件夹。创建 Dokerfile 文件,并写入如下代码:
########
# THIS FILE IS INSIDE YOUR NUXTJS APPLICATION ROOT DIR
####
FROM node:latest
USER root
WORKDIR /var/www/nuxt # 前端代码目录
构建 Nginx
docker-compose build nginx
构建 nuxtjs
docker-compose build nuxtjs
进入 nuxtjs 容器运行 Nuxt 服务
docker-compose exec nuxtjs bash
# 运行 Nuxt 服务 0.0.0.0:9999
npm run dev
接下来前端 后端都可以运行,但是 前端 Nuxt 会报如下错误
我把 Nuxt 的启动端口换成 80 端口 会出现以下错误:
最终这个问题困扰了好几天.......最后的解决方案如下:
host 指向 laradock 的 Nginx 容器即可。
import axios from 'axios';
axios.defaults.proxy = { host: 'nginx' }
其实我一开始就往这里想,一直改的是 nuxt.config.js 文件,发现并不生效,但其实 我司这个项目自己改写了 axios,自己封装了 axios 导致我改的代码不生效.......
这就是躺过的坑,希望可以帮助以后的人......
2021-12-09 新的解决方案
只需设置 proxy_pass http://host.docker.internal:3000;
即可。
#server {
# listen 80;
# server_name node.com.co;
# return 301 https://node.com.co$request_uri;
#}
server {
listen 80;
listen [::]:80;
#listen 443;
#listen [::]:443;
server_name www.pxpxx.local;
#ssl on;
#ssl_certificate /var/certs/node.com.co/cert.pem;
#ssl_certificate_key /var/certs/node.com.co/privkey.pem;
#ssl_protocols SSLv3 TLSv1 TLSv1.1 TLSv1.2;
#ssl_ciphers HIGH:!aNULL:!MD5;
location / {
proxy_pass http://host.docker.internal:3000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_cache_bypass $http_upgrade;
}
location ~ /\.ht {
deny all;
}
location /.well-known/acme-challenge/ {
root /var/www/letsencrypt/;
log_not_found off;
}
error_log /var/log/nginx/www.pxpxx.local.local_error.log;
access_log /var/log/nginx/www.pxpxx.local.local_access.log;
}
关于极客返利
极客返利 是由我个人开发的一款网课返利、返现平台。包含 极客时间返现、拉勾教育返现、掘金小册返现、GitChat返现。目前仅包含这几个平台。后续如果有需要可以考虑其他平台。 简而言之就是:你买课,我返现。让你花更少的钱,就可以买到课程。
版权许可
本作品采用 知识共享署名 4.0 国际许可协议 进行许可。转载无需与我联系,但须注明出处,注明文章来源 Laradock 运行 Nuxt 的一些问题