简单描述:代码开发完了,需要环境来运行测试.服务器上没有nginx,搞起搞起.   在Centos下,yum源不提供nginx的安装,可以通过切换yum源的方法获取安装.也可以通过直接下载安装包的方法,**以下命令均需root权限执行**:   首先安装必要的库(nginx 中gzip模块需要 zlib 库,rewrite模块需要 pcre 库,ssl 功能需要openssl库).选定**/usr/local**为安装目录,以下具体版本号根据实际改变. 安装:1.安装gcc gcc-c++(如新…

一.安装nginx #设置源 sudo rpm -Uvh http://nginx.org/packages/centos/7/noarch/RPMS/nginx-release-centos-7-0.el7.ngx.noarch.rpm #安装 yum install -y nginx #启动服务 systemctl start nginx.service #关闭服务 systemctl stop nginx.service #开机自启 systemctl enable nginx.servi…

nginx是一个高性能的HTTP和反向代理服务器.因此常用来做静态资源服务器和后端的反向代理服务器.本文主要记录使用nginx去部署使用vue搭建的前端项目,项目基于vue官方的脚手架vue-cli构建. 打包vue项目 npm run build 通过上面命令后打包好的静态资源将输出到dist目录中.如图所示  安装nginx 到nginx官方下载系统相关的nginx版本安装 windows环境 下载相应的windows版本解压,解压后如图所示 启动命令: cd D:\ProgramFiles…

一.打包vue项目 在开发完的vue项目输入如下命名,打包生成dist文件夹 yarn build / npm run build 此时根目录会多出一个文件夹:dist文件夹,里面就是我们要发布的东西. 如果将该dist目录整个传到服务器上,部署成静态资源站点就能直接访问到该项目. 二.获取nginx 镜像 nginx 是一个高性能的HTTP和反向代理服务器,此处我们选用 nginx 镜像作为基础来构建我们的vue应用镜像. 在终端输入: docker pull nginx 即可以获取到ngin…

给前端同事部署了web项目之后,访问发现除了index.html可以访问,其他的路径使用了“伪静态”.比如访问:http://localhost:8081/user/login,访问即报404错误,这个实际上是请求HTML相关资源而非后台接口,后面网上查了相关资料找到了解决办法. upstream portalServer { server 192.168.1.1:8080; } server { listen 8081; server_name localhost; root /usr/loc…

1.项目打包生成dist文件夹 在项目根目录下打开cmd窗口,输入命令 npm run build //生成dist文件夹 2.将dist文件夹上传到centos7 使用scp命令或者用远程连接工具将打包好的dist文件夹上传到服务器或者虚拟机的某个位置. 打开cmd命令输入: scp -r E:\\dist root@192.168.3.5:/home/dist 输入root 用户密码,等待上传成功即可 ​ E:\dist 为dist所在目录 root 为虚拟机root用户 192.168.3…

首先我使用的是后端接口+前端vue的形式,这样就涉及到跨域的问题.我是这样配置的: server { listen 80; server_name www.liangyp.xyz;//访问网址 location / { root /var/www/VueApp; index index.html index.htm; } //这里是配置的如果访问apis则是转到后端接口,这样就避免了跨域 location /apis { rewrite ^/apis/(.*)$ /$1 break; proxy…

. 官网下载 http://nginx.org/en/download.html 选择stable version nginx/Windows-1.14.1 pgp . 解压 然后配置环境变量,如果环境变量配置无效,启动时请在nginx文件夹中打开命令窗口 . 打开一个命令窗口 输入start nginx启动服务(停止服务 nginx -s stop) .打开文件中的conf=>nginx.conf更改配置,更改监听的端口号 . 注释掉图中红点处 . 在conf文件夹下新建一个conf.d文件夹…

在nginx上部署vue项目(history模式): vue-router 默认是hash模式,使用url的hash来模拟一个完整的url,当url改变的时候,页面不会重新加载.但是如果我们不想hash这种以#号结尾的路径时候的话,我们可以使用路由的history的模式.比如如下网址:使用hash模式的话,那么访问变成 http://localhost:8080/bank/page/count/#/ 这样的访问,如果路由使用 history的话,那么访问的路径变成 如下:http://local…

在很早之前,我写了一篇 关于 在nginx上部署vue项目(history模式) 但是讲的都是理论,所以今天做个demo来实战下.有必要让大家更好的理解,我发现搜索这类似的问题还是挺多的,因此在写一篇有关这方面的实战文章.在讲解之前,我们还是和以前一样,一步步来,先看下我们项目的整个架构. |------- 项目的根目录 | |--- app | | |--- index | | | |--- components | | | | |--- home.vue | | | | |--- index…

Docker 部署 vue 项目 Docker 作为轻量级虚拟化技术,拥有持续集成.版本控制.可移植性.隔离性和安全性等优势.本文使用Docker来部署一个vue的前端应用,并尽可能详尽的介绍了实现思路和具体步骤,以方便有类似需要的同学参考. Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,该容器包含了应用程序的代码.运行环境.依赖库.配置文件等必需的资源,通过容器就可以实现方便快速并且与平台解耦的自动化部署方式,无论你部署时的环境如何,容器中的…

前面介绍了很多关于ABP框架的后台Web API 服务端,以及基于Vue+Element前端应用,本篇针对两者的联合部署,以及对部署中遇到的问题进行处理.ABP框架的后端是基于.net core5.0 的Asp.net core 应用,因此和常规的Asp.net core 应用部署一样:而Vue+Element前端应用则是基于nodejs的应用,部署方式又有所不同,这里介绍基于Nginx的部署. 1.部署基于.netcore5.0的ABP框架后台Api服务端 1)安装.net core 环境 在…

最近使用django写了一些项目,不过部署到服务器上碰到一些问题,还有静态文件什么的一堆问题,这里总结一下碰到的问题和解决方案,总体思路是按照官方文档走的. 原文地址:http://uwsgi-docs.readthedocs.io/en/latest/tutorials/Django_and_nginx.html 讲的很清楚,不过还是需要一些注意的地方 对于uwsgi+nginx的部署方式,它的访问关系大概是: the web client <-> the web server <-&…

1. nginx部署h5项目 此为windows部署,liunx也类似的 1.1. 前言 部署h5项目还是很简单的,不过对小白来讲一开始可能也是一脸懵逼,这个简单教程针对的是从未部署过前后端分离前端项目的小白 1.2. 步骤 1.2.1. 下载nginx 如下图目录 1.2.2. 放入经过编译的h5项目 把经过编译的h5项目放入html文件夹下,可以在html里面创建一个单独文件夹,把内容放进去 如下图 1.2.3. 修改conf 进入conf目录,打开nginx.conf文件 1.2.4. 启…

服务器使用nginx部署PHP项目的时候如果样式没有 出来,那么很可能 location 块里出问题了. 比如 location / { root /home/wwwroot/default/php_project; fastcgi_pass 127.0.0.1:9000; fastcgi_index index.php; fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name; include fastcgi_param…

用Flask开发之后,很多人,喜欢用nohup python manage.py & 这样的形式,放到后台运行,其实这样只是个发开模式,很简陋,无法支持并发,进程监控等功能.所以采用nginx+uwsgi+flask的方式进行部署. 系统:Ubuntu 16.04 LTS 1.安装python3虚拟环境 安装虚拟环境还是很有必要的,例如刚开始我没有装,直接用系统的python3,到uwsgi启动时,遇到很多问题.Ubuntu 16.04 上有预装了2.7,3.5两个python版本. sudo…

一.环境准备 1.centos7系统 2.mysql数据库 3.在centos7虚拟机上安装好nginx 二.部署内容准备 1.后端war包 或者可执行jar 因为我这里是spring boot项目.我就以可执行jar文件作为后端部署内容,如果是war包,则需要部署在web容器中,这个很简单,不多说. 首先右键点击自己要部署的项目,run as---->maven insatll 打包 找到打包好的jar,复制到centos上, 执行  java -jar   XXXX.jar,后台正常启动,…

在部署项目之前本人已经将前端代码和后端代码发布在了一个网站上,大家可自行下载,当然如果有Xftp工具也可以直接从本地导入. django代码 https://files.cnblogs.com/files/pyyu/luffy_boy.zip vue代码 https://files.cnblogs.com/files/pyyu/07-luffy_project_01.zip 一.将代码搞到服务器上 在linux上直接下载 wget https://files.cnblogs.com/files/…

1.部署Nginx 请参考Linux下部署nginx,此处不再重复 2.Vue项目打包 # 打包正式环境 npm run build:prod # 打包预发布环境 npm run build:stage 3. 部署时可能会发现资源路径不对 ,只需修改 vue.config.js下 文件资源路径 # 请根据自己路径来配置更改 publicPath: './' 4. 将打包后的dist文件夹上传至服务器 本次项目路径为 /usr/local/webapp/ 5.修改Nginx的conf文件 vim…

参考链接 nodejs服务器部署教程二,把vue项目部署到线上 打包 #在本地使用以下命令,打包 npm run build #打包之后本地会出现dist文件夹.将dist文件夹以及package.json 文件上传到centos服务器上,此处随便什么位置,新建个文件夹就能放. 启动项目 新建一个app.js文件,文件内容如下 //定义目录 const fs = require('fs'); const path = require('path'); const express = requir…

最近开发的微信公众号项目中(项目采用Vue + Vux 构建,站点部署在IIS8.5上),遇到个非常奇葩的问题,发布站点内容后,通过微信打开网址发现是空白页面(后来验证是微信浏览器缓存了入口文件-index.html,顾之前版本的index页面找不到对应的js,因为我们每次发布会将之前的版本放至另外的备份目录),但关闭网页再次去打开又是正常的.最初开发内部测试时该问题没有引起关注,因为开发人员大部分都是android的手机,后来测试发现,某些android机型不是必现此问题,但是苹果(IOS)机…

部署条件: 1.一台阿里云服务器(本人的是CentOS系统的服务器) 2.已经构建好的项目 3.服务器上安装并配置Nginx 首先第一步:在服务器上安装并配置Nginx 进入服务器 $ ssh root@服务器IP     安装编译工具以及库文件: yum -y install make gcc-c++ libtool          安装PCRE(PCRE 作用是让 Nginx 支持 Rewrite 功能) $ cd /usr/local $ wget http://downloads.so…

网上有很多教程写的一大堆东西,新手可能会有点看不懂,现在我写这篇文章是为了更好的帮助新手,如何将自己的前端项目部署到自己的服务器上. 首先我们必须要有一台自己的ubuntu服务器,如果没有可以去阿里云官网去购买一台,趁现在阿里云搞活动.(ps:我并没有打广告) 然后我们准备我们的前端项目不管你是vue项目还是普通的jquery写的项目都是一样的,本文的前端项目是vue. 通过git把他克隆到我们的服务器下面,我的前端项目就放在/home 下面是我前端项目的目录和内容,我们主要是用到打包后的dis…

概要 本文用一台安装了centos7.5系统的裸奔Linux机器(当然是虚拟机)详细讲解从无到有部署django项目的过程. 安装必要的工具 配置yum源 至于什么是yum源大家请自行百度,本人用的是阿里云的yum源,因此需要在裸机上配置一下: 进入yum源的目录 cd /etc/yum.repos.d/ 查看yum源文件 ls -l 配置阿里云yum源 1.好习惯,备份yum源 mkdir repo_bak mv *.repo repo_bak/ 2.下载阿里云repo文件 wget http…

很多项目的前端都使用vue编写的,在项目上线部署的时候,有些项目要求把前端页面和后台服务部署在不同的服务器,这就要求使用nginx代理,本文就来讲讲vue项目怎么使用nginx代理. 项目github地址:https://github.com/Little-Orange7/cmms-vue 一．本地开发配置 Vue项目本地开发,框架自带了一个代理的工具,可以利用这个工具来模拟代理配置: 说明: '/api': {// 请求接口中匹配到/api的接口,都统一走这个代理 这个是匹配请求接口的上下文路…

更新系统软件源 sudo apt-get update pip3安装 sudo apt install python3-pip 安装virtualenvwrapper pip3 install virtualenvwrapper 修改.bashrc,最后面添加以下代码: export VIRTUALENVWRAPPER_PYTHON=/usr/bin/python3 source /usr/local/bin/virtualenvwrapper.sh 重新加载配置 source ~/.bashr…

1.编译打包Vue项目 在终端输入 npm run build 进行打包编译.等待... 打包完成生成dist文件夹,这就是打包完成的文件. 我们先放着,进行下一步. 2下载Nginx 下载地址: http://nginx.org/en/download.html 下载完成解压就可以了.由于我这个腾讯云服务,只有一个C盘,我就放在C盘根目录下,放其他目录下也是一样的. 接下来把Nginx设置为windwos服务 每次重启,我们都需要手动的启动一下服务,对我们运维很不方便. 1.我们使用  win…

上传文件 1.通过Xftp将vue项目文件上传至云服务器:由于node_modules这个依赖包体积较大,上传较慢,上传时跳过,在云服务器上重新进行npm install安装依赖包即可: 2.也可通过git clone从github上克隆项目(首先需要安装git) 3.打开xshell,进入到vue项目所在的目录下,安装依赖 npm install 4.打包vue项目: npm run build 编辑docker-compose.yml 1.在vue项目的同级目录下添加docker-compo…

安装nginx的前奏 安装依赖 yum -y install gcc zlib zlib-devel pcre-devel openssl openssl-devel 创建一个文件夹 cd /usr/local mkdir nginx cd nginx 下载Nginx tar包 和 解压 wget http://nginx.org/download/nginx-1.13.7.tar.gz tar -xvf nginx-1.13.7.tar.g 安装nginx 进入nginx目录 cd /usr/…

前言 部署了三个nginx用于前端项目, 并使用keepalived部署好热备, 所以总共有5个nginx 创建好nginx的文件和配置 根据上面的指令创建好目录 mkdir /home/web/nginx01 mkdir /home/web/nginx02 mkdir /home/web/nginx03 nginx.conf配置文件 这里我配置了三个nginx节点 user nginx; worker_processes 1; error_log /var/log/nginx/error.lo…