vue前端部署正式环境 时执行npm run build报Built files are meant to be served over an HTTP server.Opening index.html over file:// won't work.,浏览器访问vue.catcook.top报nginx Internal Server Error

1.看你截图， npm run build 的时候成功了啊，没有报500 Internal Server Error nginx

2.如果vue访问的域名和appserver对应的域名不一致，请注意跨域问题

@Fecshop #1楼 appserver 模块中Helper.php文件已按照文档配置了跨域域名,请看帖子最后一张图

我有个疑问

npm run build报500 Internal Server Error nginx 这个是nginx配置文件

npm run build, 构建的时候，怎么会报错nginx的错误？是不是你写错了

这个报错，貌似我帮不上忙。

@Fecshop [[[#3楼](#comment3)](#comment3)](#comment3)

两个疑问,如下

1.npm run build报 Built files are meant to be served over an HTTP server.Opening index.html over file:// won't work**

2.请问vue_fecshop_appserver 是下载/www/web/yii2_fecshop_docker/app/fecshop/目录还是docker-compose exec php bash 进入PHP容器 下载到/www/web/fecshop/目录?

1.vue_fecshop_appserver 部分没有使用docker，需要自己搭建。

原理商，目录随便放，nginx容器做指向即可，但是，按照fecshop docker里面默认的配置，参看第2条

2.在nginx容器可以看到: https://github.com/fecshop/yii2_fecshop_docker/blob/master/services/web/nginx/conf/conf.d/default.conf

# VUE
server {
    listen     80;
    server_name vue.fecshop.com;
    root  /www/web/vue_fecshop_appserver/dist ;
    server_tokens off;
    include none.conf;
    index index.php index.html index.htm;
    access_log /www/web_logs/access.log wwwlogs;
    error_log  /www/web_logs/error.log  notice;
    
    location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$ {
        expires      30d;
    }

    location ~ .*\.(js|css)?$ {
        expires      12h;
    }
}

nginx容器构建配置文件：https://github.com/fecshop/yii2_fecshop_docker/blob/master/docker-compose.yml#L9 ，可以看到，将宿主主机的文件挂载到了nginx容器中

volumes:  
	./app:/www/web

那么你把文件复制到宿主主机的./app就相当于nginx容器里面的/www/web。

因此，按照默认的nginx配置，vue_fecshop_appserver 下载到宿主主机/www/web/yii2_fecshop_docker/app，

下载后，在/www/web/yii2_fecshop_docker/app/vue_fecshop_appserver中执行npm run build

我的域名为catcook.top

其中vue_fecshop_appserver项目放在/www/web/yii2_fecshop_docker/app/fecshop目录下

/www/web/yii2_fecshop_docker/services/web/nginx/conf/conf.d目录下nginx配置为

server {
    listen     80;
    server_name vue.catcook.top;
    root  /www/web/vue_fecshop_appserver/dist ;
    server_tokens off;
    include none.conf;
    index index.php index.html index.htm;
    access_log /www/web_logs/access.log wwwlogs;
    error_log  /www/web_logs/error.log  notice;
    
    location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$ {
        expires      30d;
    }

    location ~ .*\.(js|css)?$ {
        expires      12h;
    }
}

为啥访问一直报服务器500 Internal Server Error?是我忽略了什么配置吗？？

我看/www/web/yii2_fecshop_docker/services/web/nginx/conf/conf.d目录下none.conf配置为

location / {
    index index.html index.php; ## Allow a static html file to be shown first
    try_files $uri $uri/ @handler; ## If missing pass the URI to Magento's front handler
    expires 30d; ## Assume all files are cachable
}

location  /. { ## Disable .htaccess and other hidden files
    return 404;
}

location @handler { ## Magento uses a common front handler
    rewrite / /index.php;
}

location ~ .php/ { ## Forward paths like /js/index.php/x.js to relevant handler
    rewrite ^(.*.php)/ $1 last;
}

而/www/web/yii2_fecshop_docker/services/web/nginx/logs/error.log报错日志为

2019/04/29 14:58:05 [error] 7#7: *1462 rewrite or internal redirection cycle while redirect to named location "@handler", client: 117.173.130.165, server: vue.catcook.top, request: "GET /favicon.ico HTTP/1.1", host: "vue.catcook.top", referrer: "http://vue.catcook.top/"

需要修改none.conf配置吗？

在www/web/yii2_fecshop_docker/app/fecshop/appserver/web目录下 修改index.php文件内容为自己的域名

<?php
/**
 * 【Appserver端性能优化】：如果vue和appserver是不一样的域名，对于这种跨域的前端和后端交互，需要cros机制，具体您可以自己查阅
 * 原理为：第一次发送options请求，如果请求成功，获取服务端允许的请求类型，然后再发起具体的数据请求
 * 对于options请求，不涉及到数据，因此直接返回即可，因此下面加了下面的代码
 * 对于下面的设置的允许的值，是fecshop目前允许的，如果您添加了其他的，请在下面自行修改
 * 下面的cros的信息要和 @fecshop/app/appserver/modules/AppserverTokenController.php 这个文件里面的设置要一致。
 * 默认，下面是注释掉，您可以根据自己的情况，取消掉下面的注释，让options请求在index.php文件执行的时候直接返回，节省资源。
 */ 

if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
    $cors_allow_headers = ['fecshop-uuid','fecshop-lang','fecshop-currency','access-token'];       
    header('Access-Control-Allow-Origin: vue.catcook.top');
    header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, ".implode(', ',$cors_allow_headers));
    header('Access-Control-Allow-Methods: GET, POST, PUT, PATCH, DELETE, HEAD, OPTIONS');
    exit;
}

error_reporting(E_ALL & ~E_NOTICE & ~E_COMPILE_WARNING ); //除去 E_NOTICE E_COMPILE_WARNING 之外的所有错误信息
ini_set('session.cookie_domain', '.catcook.top'); //初始化域名，
$http = ($_SERVER['SERVER_PORT'] == 443) ? 'https' : 'http';
$homeUrl = $http.'://'.$_SERVER['HTTP_HOST'].rtrim(dirname($_SERVER['SCRIPT_NAME']), '\\/');
/**
 * fecshop 使用合并配置（config）数组进行加速，true 代表打开。
 * 打开配置加速开关前，您需要执行 http://domain/index-merge-config.php 进行生成单文件配置数组。
 * 注意：打开后，当您修改了配置，都需要访问一次上面的链接，重新生成单文件配置数组，否则修改的配置不会生效
 * 建议：本地开发环境关闭，开发环境如果访问量不大，关闭也行，如果访问量大，建议打开
 * 
 */
$use_merge_config_file = false; 
 
defined('YII_DEBUG') or define('YII_DEBUG', true);
defined('YII_ENV') or define('YII_ENV', 'dev');
defined('FEC_APP') or define('FEC_APP', 'appserver');

require(__DIR__ . '/../../vendor/autoload.php');
require(__DIR__ . '/../../vendor/fancyecommerce/fecshop/yii/Yii.php');

require(__DIR__ . '/../../common/config/bootstrap.php');

require(__DIR__ . '/../config/bootstrap.php');

if($use_merge_config_file){
	$config = require('../merge_config.php');
}else{
	$config = yii\helpers\ArrayHelper::merge(
		require(__DIR__ . '/../../common/config/main.php'),
		require(__DIR__ . '/../../common/config/main-local.php'),
		require(__DIR__ . '/../config/main.php'),
		require(__DIR__ . '/../config/main-local.php'),
        
		# fecshop 公用配置
		require(__DIR__ . '/../../vendor/fancyecommerce/fecshop/config/fecshop.php'),
		# fecshop 入口配置
		require(__DIR__ . '/../../vendor/fancyecommerce/fecshop/app/appserver/config/appserver.php'),
		
		# thrid part confing
		# 第三方 公用配置
        require(__DIR__ . '/../../common/config/fecshop_third.php'),
        # 第三方 入口配置
        require(__DIR__ . '/../config/fecshop_third.php'),
        
		# 本地 公用配置
		require(__DIR__ . '/../../common/config/fecshop_local.php'),
		# 本地 入口配置
		require(__DIR__ . '/../config/fecshop_local.php')
		
	);
}

$config['homeUrl'] = $homeUrl;

/**
 * yii class Map Custom 
 */ 
$yiiClassMap = yii\helpers\ArrayHelper::merge(
    require(__DIR__ . '/../config/YiiClassMap.php'),
    require(__DIR__ . '/../../common/config/YiiClassMap.php')
);
if(is_array($yiiClassMap) && !empty($yiiClassMap)){
	foreach($yiiClassMap as $namespace => $filePath){
		Yii::$classMap[$namespace] = $filePath;
	}
}

/**
 * Yii 重写block controller model等
 * 也就是说：除了compoent 和services，其他的用RewriteMap的方式来实现重写
 * 重写的类可以集成被重写的类
 */ 
$yiiRewriteMap = yii\helpers\ArrayHelper::merge(
    require(__DIR__ . '/../config/YiiRewriteMap.php'),
    require(__DIR__ . '/../../common/config/YiiRewriteMap.php')
);
if(is_array($yiiRewriteMap) && !empty($yiiRewriteMap)){
	Yii::$rewriteMap = $yiiRewriteMap;
}


/**
 * 添加fecshop的服务 ，Yii::$service  ,  将services的配置添加到这个对象。
 * 使用方法：Yii::$service->cms->article;
 * 上面的例子就是获取cms服务的子服务article。
 */
new fecshop\services\Application($config['services']);
unset($config['services']);

$application = new yii\web\Application($config);
$application->run();

1/请问，你的问题解决了？

2.npm run build error 500 Internal Server Error 这个是如何解决的？

3.您也是费了好些时间才解决，可否把你遇到的问题，完整的整理一下，方便后面遇到同样问题的人，方便他们解决问题？

@Fecshop [[[[[[#9楼](#comment9)](#comment9)](#comment9)](#comment9)](#comment9)](#comment9)

很遗憾,到现在我还没解决

问题如下

1.执行npm run build 后问题如下

2.浏览器访问 vue.catcook.top 报500 Internal Server Error

2019/04/30 01:21:07 [error] 6#6: 14 open() "/www/web/vue_fecshop_appserver/dist/favicon.ico" failed (2: No such file or directory), client: 171.88.42.103, server: vue.catcook.top, request: "GET /favicon.ico HTTP/1.1", host: "vue.catcook.top", referrer: "http://vue.catcook.top/" 2019/04/30 01:21:20 [error] 6#6: 14 rewrite or internal redirection cycle while redirect to named location "@handler", client: 171.88.42.103, server: vue.catcook.top, request: "GET / HTTP/1.1", host: "vue.catcook.top"

1.第一个没有问题

2.第二个是nginx设置有问题，你可以在宿主主机的/www/web/yii2_fecshop_docker/app/vue_fecshop_appserver/dist 下面添加一个静态文件xx.html，用nginx访问试试这个html文件试试，先调好nginx，多琢磨琢磨原理/

@Fecshop #11楼 方式2 我尝试了 加了个静态页面 index_test.html在dist目录下，访问vue.catcook.top/index_test.html

也访问不了。

请问楼主是不是使用docker部署到正式环境的？？ 那么我怀疑/www/web/yii2_fecshop_docker/services/web/nginx/conf/conf.d/none.conf配置可能有问题，

@hillmay2015 #12楼 去学习下docker和nginx吧

基础知识帮不上。