Laradock 运行 Nuxt 的一些问题
时间:2022-07-23
本文章向大家介绍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 导致我改的代码不生效.......
这就是躺过的坑,希望可以帮助以后的人......
- Global eval. What are the options?
- 3d效果的图片轮播
- 关于等待事件"read by other session"(r3笔记第89天)
- URI编码解码和base64
- 阿里大数据竞赛第一名大神github源代码分享(O2O优惠券使用预测)
- 关于导入dump(r3笔记第98天)
- DOM 节点的克隆与删除
- 异步Promise实现
- 《数学之美》拾遗——TF-IDF
- javascript URL实现简易书签
- 爬取淘宝/天猫评论数据的过程
- 通过shell分析表依赖的层级关系(r3笔记第97天)
- 简单易学的机器学习算法——决策树之ID3算法
- 一个框架解决几乎所有机器学习问题
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法