安装node

https://github.com/nodesource/distributions#installation-instructions-1

注意使用No root privileges方法安装

安装yarn

curl --silent --location https://dl.yarnpkg.com/rpm/yarn.repo | sudo tee /etc/yum.repos.d/yarn.repo
sudo yum install yarn

安装nginx

//安装nginx的命令
sudo yum install epel-release
sudo yum install nginx
//让nginx随系统启动而启动
sudo systemctl enable nginx
//常用命令
//启动:nginx
//停止:nginx -s stop
//重载配置:nginx -s reload
//配置路径:/etc/nginx/nginx.conf
//日志路径:/var/log/nginx

nginx关键配置

    server {
listen 80 default_server;
listen [::]:80 default_server;
server_name domain.com www.domain.com;
root /home/client/;
location / {
try_files $uri $uri/ /index.html;
}
location /api/ {
proxy_pass http://127.0.0.1:7001/;
}
}

注意两个location和root,不要把vue的静态文件放在root目录下

注意最后一个location中,api和7001后面都有斜杠

nginx证书配置

	server
{
listen 443;
server_name your-domain.com www.your-domain.com;
ssl on;
ssl_certificate /root/ssl/your-domain.crt;
ssl_certificate_key /root/ssl/your-domain.key;
ssl_session_timeout 5m;
ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_prefer_server_ciphers on;
location / {
proxy_buffer_size 128k;
proxy_buffers 32 32k;
proxy_busy_buffers_size 128k;
proxy_pass http://127.0.0.1:912;
}
}
server
{
listen 80;
server_name your-domain.com www.your-domain.com;
rewrite ^(.*)$ https://$host$1 permanent;
}

为了调试方便,vue.config.js的配置如下

module.exports = {
devServer: {
proxy: {
'/api': {
target:'http://127.0.0.1:7001',
changeOrigin: true,
secure: false,
pathRewrite: {
'^/api': '/' //重写之后url为 http://127.0.0.1:7001/xxxx
//pathRewrite: {'^/api': '/api'} 重写之后url为 http://192.168.1.16:8085/api/xxxx
}
}
}
}
};

egg.js调试配置如下:config文件夹下plugin.js

module.exports = {
cors: {
enable: true,
package: 'egg-cors'
}
};

config.default.js:注意这里的配置是有些危险的,因为可能会同步到服务器上去

  config.security = {
csrf: {
enable: false
},
domainWhiteList: [ '*' ]
};
config.cors = {
origin: '*',
allowMethods: 'GET,HEAD,PUT,POST,DELETE,PATCH,OPTIONS'
};

  

eggjs+vue+nginx配置的更多相关文章

  1. thinkphp5 + vue nginx配置

    thinkphp5 + vue 配置 server { listen ; listen [::]:; # For https listen ssl; listen [::]: ssl; ssl_cer ...

  2. vue+nginx配置二级域名

    [1]修改路由文件 [2]修改配置文件 [3]修改本机nginx配置文件 [4]修改服务器nginx配置文件 [5]重启nginx文件,用二级域名访问 http://192.168.199.xxx:7 ...

  3. 前后端分离 vue的nginx配置

    nginx配置vue 有全静态化  与 vue自己的应用端口 两种方式 以下是nginx跳转到vue自己的端口 https://www.jianshu.com/p/b7bd0d352db7 以下是全静 ...

  4. Vue 应用 nginx 配置 前后端不分离模式

    一.先在官网下载nginx 软件,解压后放在软件盘中如D盘 将nginx 文件夹拖到编译器中,打开conf 文件夹中的 nginx.conf 文件,找到其中的server {} 配置项,默认35 行. ...

  5. vue 子目录配置,负载均衡 nginx

    1. 我使用的是,腾讯云做负载均衡. 负载均衡配置: https://www.xxxx.com/vue   域名指向的服务器地址:10.10.10.10:80/vue 2. nginx 配置: ser ...

  6. vue路由history模式,nginx配置

    nginx配置内容 # For more information on configuration, see: # * Official English Documentation: http://n ...

  7. vue-router History 本地开发环境和nginx配置

    vue-router mode=history本地开发环境配置 解决方法1.修改webpack的的devServer配置项(devServe存在于,rvue-cli2在webapck.config.j ...

  8. SpringBoot + Vue + nginx项目部署(零基础带你部署)

    一.环境.工具 jdk1.8 maven spring-boot idea VSVode vue 百度网盘(vue+springboot+nginx源码): 链接:https://pan.baidu. ...

  9. vue-cli3.0本地代理cookie跨域请求Nginx配置

    由于后端需要通过请求取前端中的cookie信息,在本地开发模式中,直接请求接口,后端无法拿到前端cookie数据, 经测试需在 vue-cli 中使用代理,如果使用Nginx做反向代理需同时修改Ngi ...

随机推荐

  1. java连接外部接口获取数据工具类

    package com.yqzj.util; import org.apache.log4j.LogManager;import org.apache.log4j.Logger; import jav ...

  2. 视觉SLAM算法框架解析(1) PTAM

    版权声明:本文为博主原创文章,未经博主允许不得转载. 本系列文章旨在总结主流视觉SLAM算法的框架,对比各个算法在子模块的差异,最终提炼出融合各个算法优点的架构. PTAM[1]是视觉SLAM领域里程 ...

  3. SVN服务器的搭建(二)

    上一篇介绍了VisualSVN Server和TortoiseSVN的下载,安装,汉化.这篇介绍一下如何使用VisualSVN Server建立版本库,以及TortoiseSVN的使用. 首先打开Vi ...

  4. AJAX(Asynchronous JavaScript And XML)

    AJAX(Asynchronous JavaScript And XML):异步的javascript和xml技术 作用:在不刷新整个页面的情况下,通过XMLHttpRequest向后台偷偷发起请求, ...

  5. Reveal详细安装教程

    Reveal的详细安装使用 标签: Reveal 工具 调试 iOS 一.终端的操作 首先最重要的一点,要先把Reveal软件放到Application中,否则路径是错的,后面的设置也就没有作用了 打 ...

  6. Jenkins+maven+jmeter+eclipse搭建自动化测试平台

    一.准备工作 1.jmeter准备测试脚本 2.maven环境配置 3.eclipse创建maven项目 4.Jenkins集成项目 二.jmeter准备测试脚本 使用jmeter准备测试脚本(不管录 ...

  7. 四剑客(find&grep)

    一.find 简介: find相关:条件匹配表达式.选项表达式.动作表达式.组合条件表达式 1.1.语法格式 find   path   -option   [   -print ]   [ -exe ...

  8. django框架基础-视图系统-长期维护

    ##################   什么是视图?     ####################### 视图: 1,一个视图函数(类),简称视图,是一个简单的Python 函数(类),它接受W ...

  9. django项目总结_20191128

    django项目总结_20191128 ##################### 1,这个项目分为四个部分: 用户模块 商品模块 购物车模块 订单模块 2,这个项目用到的技术: redis cele ...

  10. 发现个很有意思的angularjs +grunt 复习项目

    最近作运维工作 docker 接触到一个开源webui dockerui 原项目地址 https://github.com/crosbymichael/dockerui 用angular框架实现,项目 ...