Laradock 运行 Nuxt 的一些问题
上周入职新公司，公司用的 后端服务是 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 导致我改的代码不生效.......
这就是躺过的坑，希望可以帮助以后的人......
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
相关产品与服务
容器服务
腾讯云容器服务（Tencent Kubernetes Engine, TKE）基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务，覆盖 Serverless、边缘计算、分布式云等多种业务部署场景，业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者，主导开源项目Crane，全面助力客户实现资源优化、成本控制。
腾讯云开发者
