vue项目上线步骤

今天，我要将前几篇文章中做好的项目上线，步骤如下;

一. 工具准备

需要用到这个工具 finalshell.exe，来连接服务器，可以自行下载并安装，简单~
https://pan.baidu.com/s/1LvMGdZ8u9r3Cqa–UsEyDw

二. 服务器准备

我买的是阿里云服务器，买了服务器，就会拥有一台服务器，当然也会拥有固定的IP，至于域名，可以选择注册，也可以不注册（注册域名，要进行域名备案才能用，备案过程有点繁琐，备案信息中的所有地址都要和身份证上的一致，且手机号的归属地也要和身份证上的相同，因为之后有工信部验证手机号这一步骤；相反，如果备案信息中的地址和身份证地址不一致，需要上传居住证；如果备案信息中的地址和身份证一致，但手机号归属地和身份证地址不一致，也需要上传居住证，所以最好的做法是备案信息中的地址、手机号归属地都要和身份证地址保持一致。提交备案信息后，等待阿里云的初审，客服会打电话来核实部分信息，比如身份证中间6位 / 身份证后4位，域名是什么等等。另外，还有一种情况是网站名字不能通过初审，我第一次是因为网站名字包含了成语。初审过了之后，阿里云客服会将备案信息提交工信部，工信部核实了手机号之后，会给手机号发送一个验证码，要确保在24小时之内完成验证，否则会被驳回。手机号验证成功之后，就是13-20个工作日的漫长等待。所以域名根据需要购买，上线自己的项目的话，不买域名也可以的）
***
（我是一条快乐的分割线）
***
接下来，我们来看下，阿里云服务器购买成功后，有什么信息

• 服务器重置密码
  默认已经忘记了密码，我们先来重置密码，以方便我们用 finalshell工具 连接上远程服务器。记得密码的可以跳过这一步。
  
  
  点击"提交"即可，重置密码成功，记得自己的服务器密码， 接下来在 finalshell 中会用到。

三. 服务器部署

打开 finalshell，

四. 安装nginx

	yum install -y nginx

设置开机启动

	systemctl start nginx.service
	systemctl enable nginx.service

好了，现在用浏览器访问自己的 公网IP 地址，却发现显示不成功，我们来分析下原因：

• nginx默认使用端口 80， ecs实例没有开启端口80，默认只有 22 和 3389。所以，我们要去阿里云ecs服务器配置80端口，即添加安全组规则
  
  
  
  
  
  然后再去浏览器访问自己的公网地址， 就可以看到如下画面
  
  到此，配置、连接成功，接下来就是要把自己的项目上线。

五. 服务器部署上线

接下来，找到一个之前的一个vue项目 , 运行如下命令打包，打包项目之后，出现一个dist文件夹目录

	cnpm run build

• 然后将dist文件夹拖到finalshell的html中，
  
  这时，去浏览器访问自己公网地址，发现还是不能打开自己的项目，为什么呢？！
  
  绝对路径问题 打开 dist 中的 html.index 文件，发现这里是绝对路径，那当然不对啦，也难怪不会显示项目
  
  解决办法有三种

• no.1 解决办法

• no.2 解决办法

• no.3 解决办法 将 **dist目录 ** 设置为根目录

	cd /etc/nginx
	vi nginx.config // vi 编辑配置文件

Fn + i ** 变为可编辑状态，做如下修改，注意格式，不要多敲 / 少敲空格。
修改完成后，按 esc 键退出编辑状态，输入 :wq!** 保存并退出。
修改完之后，一定不要忘了重启服务器！！！！！！

	/sbin/ngins -s reload

在地址栏再次输入公网地址，发现项目上线成功！

---

（我是一个快乐的分割线----------------------------------）

---

六. 服务器部署nodejs环境

nodejs环境已经搭建好的，可以略过这一步。

- 使用NVM安装多版本

1、使用git将源码克隆到本地的~/.nvm目录下，并检查最新版本。

yum install git

	git clone https://github.com/cnpm/nvm.git ~/.nvm && cd ~/.nvm && git checkout git describe --abbrev=0 --tags
	

2、激活NVM。

	
	echo ". ~/.nvm/nvm.sh" >> /etc/profile
    source /etc/profile
   

3、列出Node.js的所有版本。

  nvm list-remote
  

4、安装版本

	nvm install v8.12.0
	nvm install v10.15.0

5、运行nvm ls查看已安装的Node.js版本，当前使用的版本为v10.15.0。返回结果如下所示。

	nvm ls

6、可以使用 nvm use v8.12.0进行切换node的版本

七. 部署nodejs环境

	node -v
	npm -v

在自己电脑上执行此命令，（必须确保安装了脚手架，可以使用 express --version测试）

	cnpm /npm install express-generatore -g

创建server.js，自己创建一个服务器

本地通过 node server.js 运行,浏览器访问localhost:3000得到结果


将该文件上传到服务器

	cd /usr/local
	ls

	mkdir node
	ls

	cd node
	ls

当你关闭服务器，重新打开的时候，node版本需要重新切换

无法访问的原因是 服务器的配置问题-----安全组的问题

如果要上传一个express 项目，本地新建项目

	express nodeserver  上传项目
	cd nodeserver
	npm i
	npm run start

八. 安装nginx — 可以代理3000端口

1. 在配置 nginx 时，可能会依赖于 PCRE 包和 zlib 包，先进行安装：先 cd /usr/local 切换目录

	cd /usr/local
    yum -y install pcre pcre-devel
	yum install -y zlib-devel

2. 下载 nginx

	cd /usr/local/src
    wget http://nginx.org/download/nginx-1.13.3.tar.gz

3. 解压缩

	tar -xvzf nginx-1.13.3.tar.gz

3. 配置nginx
   下载解压openssl

	wget https://www.openssl.org/source/openssl-1.0.2l.tar.gz
	tar -xvzf openssl-1.0.2l.tar.gz

cd 进入nginx解压包里，执行之前安装的pcre-devel与openssl-devel解决依赖问题

	cd nginx-1.13.3
	yum -y install pcre-devel openssl openssl-devel

再执行配置脚本来进行编译预处理

	./configure --prefix=/usr/local/nginx --conf-path=/usr/local/nginx/nginx.conf --with-http_stub_status_module --		with-http_gzip_static_module --with-http_ssl_module --with-openssl=/usr/local/src/openssl-1.0.2l

make

	make && make install

4. 使用 openssl 生成证书

	openssl req -new -x509 -nodes -out server.crt -keyout server.key

移动证书到nginx文件夹

	mv server.crt /usr/local/nginx
 	mv server.key /usr/local/nginx

6. 修改 nginx 配置文件：
先下载nginx.conf 修改为

再上传
新建文件夹用于存放多网站的nginx配置文件

	mkdir sites-enabled-server

sites-enabled-server里面新增若干文件，以便这个ECS可以给多网站使用

	cd sites-enabled-server

上传default文件

启动nginx

	/usr/local/nginx/sbin/nginx

重启nginx的服务器

	/usr/local/nginx/sbin/nginx -s reload

九. html文件就可以看做是绝对地址，dist目录是相对地址，绝对路径解决办法

no.1 解决办法
将dist目录下的东西除了index.html代码之外，全部拷贝到html文件中--------意味着绝对地址处有这些文件
当访问http://ip/dist时，就可以看到项目了

no.2解决办法
默认打包的项目是绝对地址，将打包的地址改为相对地址
vue.config.js中
publicPath: ‘./’

重新打包 cnpm run build （绝对地址变成了相对地址）

删除原先的html/dist，重新上传
访问地址，就Ok了
no.3解决办法
将dist目录设置为根目录
cd /etc/nginx
vi nginx.config （vi 编辑配置文件）
其中有一句话 root /user/share/nginx/html

fn + i (变为可编辑状态）

加注释 # root /user/share/nginx/html （加注释）
root /user/share/nginx/html/dist;

esc
:wq!
（保存并退出）

重新启动服务器
/sbin/ngins -s reload

（若没做修改 :q 退出）

十. 加域名

最后一步，加上域名，即把IP地址换成自己的域名

---

---

---

---

到此为止，一个项目就上线了~

后面Node部分写的有点粗糙，有时间再过来跟新博客吧