前端代码为什么要打包
因为前端的浏览器中只能识别出js html css 现在我们的代码包含的是.vue文件
这是浏览器无法识别的
还有在代码中充斥着大量的import 和export语法,这是模块化语法 import使用的是 es module规范 es6的模块化
在服务端中使用的是类似module.export 是commonjs语法
这些语法在浏览器是无法运行的
打包的目的是让代码再浏览器中运行
打包是要通过webpack进行打包
命令行输入npm run build:prod
打包完毕后 会生成一个dist目录
index.html就是入口文件,也是平常所说的单应用,因为他是单个页面的应用
他可以实现整个应用就只有一个页面index.html
里面所有的内容都是组件,通过js来进行动态的界面替换
这样打包完了以后 我们的项目就完成了,完成了以后尝试运行一下这个index.html
直接在浏览器打开
发现会报错
造成这个问题的原因是什么呢
因为这里写的是绝对路径
资源文件的路径设置怎么做呢
在重新打包一下
去index.html文件看一下
发现已经可以看到界面了
但是点击登录仍然登录不上去
没有关系 我们接着往下走
之后打开8089端口
发现是可以登进去的
目前nginx服务器现在是在本地,需要把它挪到线上
云服务器设密码
因为阿里云现在安全级别比较高
点击配置安全组规则
ssh采用的是22端口,所以应该是可以访问的
所以不是这个问题
应该重启一下
因为输入who没有出来东西
所以exit退出从新登了一下
这次可以了
这两句话可以实现免密登录(可忽略)
ssh-keygan生成rsa的秘钥
然后~/.ssh/id_rsa.pub找到文件
后面再加上远程连接的内容 [email protected]
更简便的是对host文件进行修改
这个意思是长时间不用的话连接会被服务器断开
解决办法:找到这个文件
这个代表每30秒客户端就会保持与服务端的连接 就可以避免自动断电的问题了
改完了他不会立即生效,需要重启一下
然后登出
在登录看看会不会自动断开
nodejs环境搭建
看看有没有生效
nvm并没有生成
vim .bash_profile
可以看到并没有生成nvm
应该是在bashrc下面
我这儿一直显示找不到nvm
后来又重新安了一遍 然后仔细看他的提示
这样跟着他输一遍就好了
然后输入nvm 显示出一大段东西的时候就代表安装好了
之后nvm install node
在通过node安装最新版本
这时候npm可以用了 npm -v
现在可以来安装cnpm了
cnpm的包就会安装到nvm下面
which cnpm
nginx安装
yum:是centos自带的 通过yum来安装centos的依赖
yum -y install pcre*
这些库都是要安装nginx的时候需要的依赖
再来安装openssl的依赖
yum -y install openssl*
之后来下载nginx
可以先建一个目录 叫nginx
mkdir nginx 待会就将源码放进去
找到nginx下载地址
我们选择源码编译形式来进行安装
因为nginx是用C语言来写的,所以要用make指令来对他进行编译 编译完了以后,使用make install来进行安装,
我们还得看看make这些指令存不存在,如果不存在还得通过yum来进行安装
用安装make 和gcc
也不知道这是安好了还是没安好
然后就可以来解压了
进入来看一下 这就是源码目录
有个绿色的configure 代表是个可执行文件
centos执行文件使用./的方式来执行的, 或者用sh 来执行
然后用make -j4来进行编译
编译完之后 make install来进行安装
安装完之后
可以看到nginx已经生成了
但是输入nginx 显示没找到,现在还没法直接使用
怎么办呢
进入到uer/bin目录下
cd /usr/bin
ll一下 usr/bin目录下的指令都是可以直接访问的
这里可以直接做个软连接
ln -s /usr/local/nginx/sbin/nginx nginx
可以理解为创建了一个快捷方式
可以看到他指向了哪
cd 回到root
这时候就可以调用nginx nginx就启动了
可以输入ps -ef|grep nginx看一下进程 进程启动了
可以通过nginx -s stop来停止nginx服务
来看一下nginx配置文件
进入conf
打开这个
可以看到默认启动的是80端口
路径是根路径下的html文件夹
打开看一下
现在通过nginx指令将服务启动起来
然后通过阿里云的ip来访问
但是我的并不能访问
试一下这个https://blog.csdn.net/qq_21882763/article/details/113823460 失败
https://www.cnblogs.com/songanwei/p/9239821.html
https://bbs.csdn.net/topics/396990545 这里有个评论 curl localhost失败
我知道了
需要添加一个80端口
这样就能访问了
接下来做一些个性化的定义
希望nginx能支持我们默认的配置
进入nginx目录下,创建一个nginx.conf
然后打开nginx的config文件
输入a进入编辑模式 把user改为root
然后到文件的最后添加一些内容
这是我们刚刚建的那个文件
意思是将root/nginx下面所有带有.conf的配置文件融合到当前的配置文件当中
接着打开刚刚建的nginx.conf
写入一些东西
因为我们监听的端口是80端口,和主配置文件有冲突,所以把主配置文件的端口改一下
给他改成9000
接着继续在nginx.conf写配置
接着进入upload 创建一个index.html
vim index.html
写点东西 这里写了个h1标签 里面写了hello world
检查一下配置文件
nginx -t
出错了
打开这个配置文件
发现并不能显示行号
那么如何显示行号呢 :set nu
是因为include那句话少了个分号,所以报错了
还是有错
额 又忘加分号了
重启nginx nginx -s reload
okkkk
现在就可以把我们的文件上传到上面了
如何实现呢
可以通过ftp工具 fileZilla / xftp 等很多软件
下载fileZilla 记得选client 而不是server
添加新站点
之后把我们最先打包好的文件拖到upload里面
在实际生产环境中建议大家不要开启index 重新修改nginx.conf配置文件
把这个关闭
不知道下面文件路径的话是没有办法访问到这边的文件的
yum install git 为了下载网易云接口
clone github项目
进入到项目
node app.js 但是退出了以后就
pm2 让它永远活着
写个脚本也可以
代码build好直接上传到服务器是可以的
但是如果我们新push了一些内容,还需要手动编译,编译完了以后打开ftp工具把代码上传上去手动上传上去
了解一下自动化部署