前端框架的部署

这个作业属于哪个课程 课程地址
这个作业要求在哪里 作业地址
这个作业的目标 软件工程实践总结&个人技术博客
作业正文 作业正文地址
其他参考文献 《构建之法现代软件工程》

一、技术概述

技术概述,描述这个技术是做什么?学习该技术的原因,技术的难点在哪里。控制在50-100字内。

这个技术是项目完成之后必须经历的部署阶段的任务。因为需要让别的用户能访问到我们的项目,因此需要将其部署服务器,vue项目需要部署到服务器才能访问,如何在服务器部署vue项目,成为一个技术难点;而且因为之前在服务器中已经部署了其他项目,因此,由于跨域问题,多个项目部署在同一服务器还是有点困难的。

二、技术详述

技术详述,描述你是如何实现和使用该技术的,要求配合代码和流程图详细描述。可以再细分多个点,分开描述各个部分。
Nginx是一款轻量级的Web 服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器,在BSD-like 协议下发行。其特点是占有内存少,并发能力强,事实上nginx的并发能力在同类型的网页服务器中表现较好,中国大陆使用nginx网站用户有:百度、京东、新浪、网易、腾讯、淘宝等。Nginx 是一个安装非常的简单、配置文件非常简洁(还能够支持perl语法)、Bug非常少的服务。Nginx 启动特别容易,并且几乎可以做到7*24不间断运行,即使运行数个月也不需要重新启动。所以,对我们来说,部署vue项目就选择它了。
  • 官网下载nginx服务器
  • vue项目打包
# 打包正式环境
npm run build:prod

# 打包预发布环境
npm run build:stage
  • 部署时可能会发现资源路径不对 ,只需修改 vue.config.js下 文件资源路径
# 请根据自己路径来配置更改
publicPath: './'
  • 将打包后的dist文件夹上传至服务器
本次项目路径为 /peashooter/
  • 修改Nginx的conf文件
vim /usr/local/nginx/cong/nginx.conf

#修改如下
server {
  listen 80;
  server_name localhost;

  # 注意设定 root路径是有dist的
  location / {
    root /usr/local/webapp/dist;
    index /index.html;
  }

  #跨域 ip和port自行替换
  location /adminApi {
    proxy_pass http://ip:port;
  }

}
  • 使配置生效
sbin/nginx -s reload
sbin/nginx -s stop
sbin/nginx
  • 访问ip地址查看效果

三、问题解决

技术使用中遇到的问题和解决过程。要求问题的描述和解决有一定的内容,不能草草概括。要让遇到相关问题的人看了你的博客之后能够解决该问题。

首先,在遇到想要在同一个服务器配置多个vue项目需要怎么做呢?
当然,最起码的需要一个服务器,还要开放相关的端口号,不同的项目可以开放不同的端口号。
然后,需要在服务器里安装相应的服务器来运行你的打包文件,我这里下载的是nginx,所以这里介绍如何使用nginx来配置多个vue项目。

  1. 首先在config文件夹内的index.js内修改(注意是build内)
// nginx 配置
assetsPublicPath: '/peashooter/',
前端框架的部署_第1张图片
2. 在src/router/index.js文件修改 ``` 添加 base: ‘/peashooter/’ ```
前端框架的部署_第2张图片
3. 修改nginx配置
#多个项目设置不同端口号的serve就可以了,十分方便

#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    server {
        listen       80;
        server_name  localhost;  
	    location /vue-admin-template {
	        alias /usr/local/nginx/vue-admin-template/dist;
	        expires  1d;
	        index index.html;
	        autoindex on;
        }
    }

    server {
        listen       81;
        server_name  localhost; 
	    location peashooter{
	        alias /usr/local/nginx/vue-admin-template/dist;
	        expires  1d;
	        index index.html;
	        autoindex on;
        }
    }
}

  1. 重启服务器

四、总结

进行总结。

nginx是一个高性能的HTTP和反向代理服务器。因此常用来做静态资源服务器和后端的反向代理服务器。首先,部署环境期间很容易遇到各种各样的问题,特别是跨域问题,在本地开发环境解决了跨域问题,但是在部署的环境依旧出现了跨域问题,这就让人很繁琐。需要在nginx的配置文件里添加跨域的配置即可,多项目的跨域最好还是设置在不同端口号,只要配置不同端口号的不同后端地址即可,十分方便。

五、参考文献

列出参考文献、参考博客(标题、作者、链接)。
  1. 《nginx部署多个vue项目》——Presbyterian

你可能感兴趣的:(前端框架的部署)