前端项目上线过程记录（配置成功）

登录服务器

ssh [email protected]（服务器ip可能改变）

快速登录配置

vim .bash_profilecd（在未登录状态下，配置登录文件，修改模式i，添加如下一行代码，退出编辑esc、保存退出:wq）
alias go106=‘ssh [email protected]’
source .bash_profile (强制执行一次，这样就不用重启服务器了)
go106 （快捷登录命令、输入密码）

查看ip

ifconfig （返回一大堆，用下面命令缩小范围）
ifconfig | grep 192 （返回结果：inet addr:172.17.0.15）

查看安装版本号

node -v （返回：12.16.2）
ruby -v （未装，先不装，以后用到的时候再装）
git --version （返回：git version 2.18.0、视频上的版本是2.8.0）
webpack -v （未装，下面安装）

处理node版本错误

yum remove nodejs npm -y （使用 yum 先删除一次旧版本的nodejs）

建立node的软连接

wget https://nodejs.org/download/release/v12.16.2/node-v12.16.2-linux-x64.tar.gz（用户根目录）
tar -xzvf node-v12.16.2-linux-x64.tar.gz (x解压，z是gz是编译过的，v看到过程，f解压文件)
./node -v（node-v12.16.2-linux-x64/bin/）
sudo mv ~/node-v12.16.2-linux-x64 ./
pwd(当前路径)
vim /etc/pro（按tab键，不是按回车）
vim /etc/profile（按回车）
export NODE_HOME=/usr/local/node-v12.16.2-linux-x64（在文件尾部pathmunge之后添加）
export PATH=$PATH:$NODE_HOME/bin（在文件尾部pathmunge之后添加）
source /etc/profile（重新加载环境变量）
sudo ln -s /usr/local/node-v12.16.2-linux-x64/bin/node /usr/bin/（线下虚拟机专用，线上不用执行这行）
sudo ln -s /usr/local/node-v12.16.2-linux-x64/bin/npm /usr/bin/（线下虚拟机专用，线上不用执行这行）
sudo ln -s /usr/local/node-v12.16.2-linux-x64/bin/npx /usr/bin/（线下虚拟机专用，线上不用执行这行）

安装cnpm

. （安装出错很就很有可能是需要处理node低版本及建立node软链接操作）
sudo npm install -g cnpm --registry=https://registry.npm.taobao.org（安装cnpm、注意-g不能少）
sudo ln -s /usr/local/node-v12.16.2-linux-x64/bin/cnpm /usr/bin/ （线下虚拟机专用，线上不用执行这行）
cnpm -v （返回结果中包含6.1.1，安装成功）

安装webpack、webpack-cli

. (安装前请确保安装了 Node.js 和npm是最新版本)
npm uninstall webpack -g （必须先卸载）
npm uninstall webpack-cli -g （必须先卸载）
sudo cnpm install webpack –g （如果报错就把-g放在webpack前面或后面试试，不能加版本号）
sudo cnpm install –g webpack-cli（如果报错就把-g放在webpack前面或后面试试，不能加版本号）
webpack -v （返回4.44.0，安装成功）
webpack-cli -v （返回3.3.12，安装成功）

安装ruby（忽略）

. （做后台页面时需要的环境）
sudo yum install ruby （再/usr/local文件夹中，安装ruby）
y （确认并回车）
ruby -v （视频返回的结果是：ruby 1.8.7 (2013-06-27 patchlevel 374) [x86_64-linux]）

安装sass（忽略）

. （做后台页面时需要的环境）
sudo su -c “gem install sass”（在/usr/local文件夹中，安装sass，安装失败，失败原因gem没有找到）（在官网上找安装方式，网址是：sass-lang.com/install，结果我在官网上没找到linux安装命令，那就照着视频敲吧，也不知道视频上的安装方式是不是已经过时了）
sudo yum install rubygems （在/usr/local文件夹中，安装gem）
y （确认并回车）
gem -v （检查版，版本返回结果：1.3.7，和视频相同）
sudo su -c “gem install sass”（再次安装sass，结果安装失败）

建立目录

ls （在根目录/中，查看文件，发现没有product和developer）
sudo mkdir product （在根目录/中，新建product，放生产环境的东西，比如dist打包文件等放这里）
sudo mkdir developer （在根目录/中，新建developer，放开发环境的东西，比如前端代码等放这里）
ll （在根目录/中，查看文件列表，发现product和developer权限是755，没有修改权限）
sudo chmod 775 -R product/ （在根目录/中，把product目录权限变更为775，有修改权限了）
sudo chmod 775 -R developer/ （在根目录/中，把developer目录权限变更为775，有修改权限了）
mkdir git-repository （在developer文件夹中，新建git-repository，仓库拉下来的代码放在这）

自动合并分支

如果master代码不是最新，就需要合并分支，方法：在码云仓库新建Pull Request（注意里面的四个勾勾都不要选中，尤其是最后一个合并后删除提交分支一定不要选，因为选了之后，原分支会被删除）

自动合并分支失败（忽略）

. （自动合并提示：此Pull Request 无法通过码云自动合并，你应该手动合并它）
git branch （在本地项目上操作，查看分支）
git checkout master （切换master分支）
git merge gxjs_v1.0 （合并分支到master分支上，如果有错误，就需要先解决这个CONFLICT错误才可以继续进行）
打开冲突的文件，去除冲突代码，提交仓库，自动合并完成）
git checkout gxjs_v1.0（切换回gxjs_v1.0分支）

配置公钥（已配请忽略）

. （同一台服务器上的多个项目可以使用一个公钥，码云仓库启用公钥即可）
cat ~/.ssh/id^C （在git-repository文件夹中，查看cat，返回如下字符表示没有生成公钥）
（返回：cat: /home/emma/.ssh/id^C: No such file or directory）
ssh-keygen -t rsa -C ‘1289**[email protected]’（在进根目录中，生成key，3次回车，返回符号画，表示生成key成功）
cat ~/.ssh/id_rsa.pub （在进根目录中，显示key，复制，码云仓库配公钥）

拉代码

sudo chmod 775 -R git-repository/ （在developer文件夹中，修改git-repository文件夹权限为775）
git clone [email protected]:gxjs/gxjs-fe.git （在git-repository文件夹中，拉代码，返回：sudo: git: command not found，表示
key没有配；有进度提示，表示拉取成功）
ls （在git-repository文件夹中，查看，发现多了gxjs-fe文件夹，进去查看代码全不全）
git pull （在gxjs-fe文件夹中，返回：Already up to date，表示代码已经是最新）

初始化项目依赖包

cnpm install （在gxjs-fe文件夹中，初始化项目依赖包，不报错表示成功，查看是否有node_modules）
安装截图貌似不正常，但是好像并不影响后续操作

打包项目

npm run www （在gxjs-fe文件夹中，打包，看是否有dist，进入查看代码）

移动dist

mkdir frontend (在product文件夹中，新建frontend，ls查看)
mkdir gxjs-fe (在frontend文件夹中，新建gxjs-fe，ls查看)
cp -R /developer/git-repository/gxjs-fe/dist/ /product/frontend/gxjs-fe/（拷贝文件夹，-R表示整个目录都拷贝过来，ll查看拷贝过来的文件）

写脚本

vim fe-deploy.sh （在developer文件夹中，新建文件，粘贴如下代码，esc，:wq保存，ll查看，发现权限是755）

#!/bin/sh
#
#使用方法
#gxjs : front_deploy.sh gxjs-fe
# 
GIT_HOME=/developer/git-repository/
DEST_PATH=/product/frontend/
# cd dir
if [ ! -n "$1" ];
	then
	echo -e "请输入要发布的项目！"
	exit
fi
if [ $1 = "gxjs-fe" ];
	then
	echo -e "=============Enter gxjs-fe================="
	cd $GIT_HOME$1
elif [ $1 = "admin-fe" ];
	then
	echo -e "=============Enter admin-fe================="
	cd $GIT_HOME$1
else
	echo -e "输入的项目名没有找到！"
	exit
fi 
# clear git dist
echo -e "=============Clear Git Dist================="
rm -rf ./dist
# git 操作
echo -e "=============git checkout master================="
git checkout master
echo -e "=============git pull================="
git pull
# npm intall
echo -e "=============npm install================="
cnpm install
# npm run www
echo -e "=============npm run www================="
npm run www
if [ -d "./dist" ];
	then
	# backup dest
	echo -e "=============dest backup================="
	mv $DEST_PATH$1/dist $DEST_PATH$1/dist.bak
	# copy
	echo -e "=============copy================="
	cp -R ./dist $DEST_PATH$1
	# echo result
	echo -e "=============Deploy Success================="
else 
	echo -e "=============Deploy Error================="
fi

chmod 775 fe-deploy.sh（在developer文件夹中，修改文件权限，ll查看，权限已改成775）
./fe-deploy.sh gxjs-fe （在developer文件夹中，运行脚本，提示success表示运行完毕，查看dist中的代码）

配置快速执行命令

vim .bash_profile （在根目录中，打开文件，编辑i，粘贴下一行代码，退出编辑esc，保存:wq）
alias dpgxjs=’/developer/fe-deploy.sh gxjs-fe’
source .bash_profile （执行生效）
dpgxjs （目录不限，执行，提示success表示运行完毕）

nginx配置

vi nginx.conf（线上在/www/server/nginx/conf/，虚拟机在/usr/local/nginx/conf/文件夹中，打开主配置文件，注释掉server，在http {}的最后，粘贴代码 include vhost/*.conf;）
sudo mkdir vhost（线上在/www/server/nginx/conf/,虚拟机在/usr/local/nginx/conf/文件夹中，新建文件夹）
sudo vim 网址.conf（线上在/www/server/nginx/conf/vhost/，虚拟机在/usr/local/nginx/conf//vhost/，新建文件，粘贴如下代码，替换网址）

server {
     
        listen 80;
        autoindex on;
        server_name 网址.com www.网址.com;
        access_log /www/server/nginx/logs/access.log combined;
        index index.html index.htm index.jsp index.php;
        if ( $query_string ~* ".*[\;'\<\>].*" ){
     
                return 404;
        }
        location = / {
     
                root /www/wwwroot/网址/gxjs-fe/dist/view;
                index index.html;
        }
        location ~ .*\.html$ {
     
                root /www/wwwroot/网址/gxjs-fe/dist/view;
                index index.html;
        }
        location / {
     
                proxy_pass http://127.0.0.1:8080/;
        }
}

sudo vim admin.网址.conf（线上在/www/server/nginx/conf/vhost/，虚拟机在/usr/local/nginx/conf//vhost/，新建文件，粘贴如下代码）

server {
     
        listen 80;
        autoindex on;
        server_name admin.网址.com;
        access_log /www/server/nginx/logs/access.log combined;
        index index.html index.htm index.jsp index.php;
        #root /devsoft/apache-tomcat-7.0.73/webapps/mmall;
        #error_page 404 /404.html;
        if ( $query_string ~* ".*[\;'\<\>].*" ){
     
                return 404;
        }
        location = / {
     
                root /www/wwwroot/网址/admin-fe/dist/view;
                index index.html;
        }
        location ~ .*\.(html|htm)$ {
     
                root /www/wwwroot/网址/admin-fe/dist/view;
                index index.html;
        }
        location / {
     
                proxy_pass http://127.0.0.1:8080/;
                #add_header Access-Control-Allow-Origin *;
        }
}

sudo vim s.网址.conf（线上在/www/server/nginx/conf/vhost/，虚拟机在/usr/local/nginx/conf//vhost/，新建文件，粘贴如下代码）

server {
     
        listen 80;
        autoindex off;
        server_name s.网址.com;
        access_log /www/server/nginx/logs/access.log combined;
        index index.html index.htm index.jsp index.php;
        if ( $query_string ~* ".*[\;'\<\>].*" ){
     
                return 404;
        }
        location ~ /(gxjs-fe|admin-fe)/dist/view/* {
     
                deny all;
        }
        location / {
     
                root /www/wwwroot/网址/;
                expires 7d;
                add_header Access-Control-Allow-Origin *;
        }
}

nginx（在vhost文件夹中，查找nginx，返回内容为：“bash：nginx: command not found”，说明没有）
sudo /usr/bin/nginx -t（线上命令）sudo /usr/local/nginx/sbin/nginx -t（检查配置文件语法，显示ok及successful，表示语法正确）
sudo /usr/bin/nginx -s reload（线上命令）sudo /usr/local/nginx/sbin/nginx -s reload（重启nginx，-s是表示平滑的重启，没有报错说明重启成功）
ifconfig（查看ip，inet addr:后面的ip是本机ip）

DNS服务器劫持

sudo vim /etc/hosts（修改本机的hosts，添加如下代码）

192.168.1.x s.happymmall.com
192.168.1.x happymmall.com
192.168.1.x www.happymmall.com
192.168.1.x admin.happymmall.com

DNS本机劫持

打开Fiddler>Tools>HOSTS填入如下配置

192.168.1.x happymmall.com
192.168.1.x www.happymmall.com
192.168.1.x s.happymmall.com
192.168.1.x admin.happymmall.com

测试

http://happymmall.com/about.html（在浏览器里访问）
cd /usr/local/nginx/logs（进入文件夹）
tail -f access.log（打开监听文件，回车几个空行，刷新网页，看看监听文件是否刷新，如果刷新说明配对了）

—————————————注解—————————————

注解：listen 80; （监听的是80端口，是http访问的时候默认的端口，不加端口号也是可以访问的）
注解：autoindex on; （目录索引开关，on表示目录可见，off表示禁用）
注解：server_name （这里配置的域名都能走到下面的逻辑）
注解：access_log （nginx日志，配置日志存放路径，combined表示合并）
注解：index index.html index.htm index.jsp index.php;（访问域名时，域名后无文件名时，默认寻找的入口文件）
注解：return 404; （找不到就404）
注解：location = / （完全是网址根路径，匹配路径，匹配文件名）
注解：location ~ …html$（正则表达式，上两个都没匹配到时，如果是html结尾的，按照匹配路径匹配，index index.html;是是默认文件名，如果指定文件名匹配成功那么这个默认文件名自动无效了）
注解：location / （如果上面都没匹配到，那么把请求代理到后端接口的地址http://127.0.0.1:8000/）
注解：#add_header Access-Control-Allow-Origin ;（配置跨域请求显示的，不注释的话所有的域都能访问我们的接口）
注解：location ~ / (gxjs-fe|admin_fe)/dist/view/ {deny all;}（如果匹配到gxjs-fe/dist/view/或admin_fe/dist/view/就拒绝，是因为我们的HTML是要求用户通过www访问，如果通过s.访问的话可能会出错，这里拒绝掉，避免不必要的麻烦）
注解：location / {} （如果是根域名）
注解：root /product/frontend/； （静态资源路径，访问方式举例s.happymmall.com/gxjs-fe/dist/）
注解：expires 7d; （因为是静态资源，所以给他一个7天时间活期时间，不能让他一直请求我们的服务器）
注解：add_header Access-Control-Allow-Origin *;（这里需要跨域，因为静态资源是s.happymmall.com而引用他们的确是 www.happymmall.com，所以这是需要跨域的）

————————————————————————————