整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

项目上线流程

项目上线流程

.代码打包

当我们完成一个项目开发的时候,下一步肯定会要把这个项目放到互联网上进行发布,此时我们就得先通过打包命令npm run build来对项目进行打包。

在命令行工具中运行(需进入项目路径):

npm run build

稍等片刻后如果提示如下信息则表示打包成功:



打包成功后会在当前项目目录下多出一个dist目录:


在打包之前一定要将之前开发过程中使用反向代理的操作给去除掉,一上线代理就失效了。同时需要注意解决数据接口的跨域请求问题。

注意:打包之后得到的这些文件都是经过压缩处理的,如果需要更改原先JavaScript、css等文件的内容,请在开发环境中去修改,然后重新打包生成。

2.上线部署

项目上线部署需要有服务器,此处我们以已经购买好的阿里云ECS(CentOS 7.9版本操作系统)为例。

后续操作会用到不少相对路径,为了保证大家的操作正确,此处统一先切换当前工作路径:

cd /usr/local/src
# 该地址是已经存在的,不需要自己创建

①如果项目中使用到了mongoDB,则需要先安装mongoDB

下载地址:https://www.mongodb.com/try/download/community


可以选择Copy Link随后去服务器中对应的目录执行命令下载:

wget https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-rhel70-4.4.1.tgz
# 或
curl -O https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-rhel70-4.4.1.tgz

也可以直接用今日docs目录下已经下载好的压缩包,使用FileZilla进行上传到服务器的/usr/local/src目录。



.tgz格式文件是压缩包文件格式的一种,需要使用其中的内容得先解压,解压命令为:

tar -zxvf mongodb-linux-x86_64-rhel70-4.4.1.tgz
# 或
tar -xvf mongodb-linux-x86_64-rhel70-4.4.1.tgz

# -z:表示指定解压缩所使用的方式,表示使用gz格式进行解压
# 如果不指定使用什么方式解压,则tar会自己判断

解压后会得到mongoDB的解压目录:

Linux系统下对于第三方软件的安装一般存放在/usr/local下,此处建议将解压后得到的目录中的bin目录进行转移,转移的同时需要创建mongoDB的数据文件夹和日志文件夹,命令如下:

mkdir -p /usr/local/mongodb/data
mkdir /usr/local/mongodb/log
cp -r /usr/local/src/mongodb-linux-x86_64-rhel70-4.4.1/bin /usr/local/mongodb/
# 建立mongodb需要使用的日志文件
touch /usr/local/mongodb/log/logfile

上述指令执行完毕后可以通过ls进行列出检查,查看是否有以下文档结构:

ls /usr/local/mongodb/


随后,就可以通过以下命令去启动mongoDB了:

需要注意,此种方式的mongoDB为绿色软件,默认不会开机自动启动,不再需要使用的时候直接删除/usr/local/mongodb目录即可卸载软件。

/usr/local/mongodb/bin/mongod --dbpath=/usr/local/mongodb/data --logpath=/usr/local/mongodb/log/logfile --bind_ip=127.0.0.1 --fork
# --dbpath:指定数据库文件夹位置
# --logpath:指定日志文件位置
# --bind_ip:绑定监听的网卡ip地址
# --fork:以后台服务的形式运行

注意:logpath配置项的值一定是一个文件(可以不存在),不能是文件夹。


至此,mongoDB已经可以使用了,可以通过运行mongoDB连接工具进行测试,如果有以下输出则一切正常:


此时可以在其中创建好maizuo数据库,以及往库中写入users表中的数据了。


②安装nodejs

文档地址:https://github.com/nodesource/distributions/blob/master/README.md


复制好对应的指令后在终端中去执行(这个命令会在我们服务器上安装一个nodejs的镜像源以告诉包管理工具去哪里下载nodejs):

curl -sL https://rpm.nodesource.com/setup_14.x | bash -

随后运行以下命令安装nodejs:

sudo yum install -y nodejs

使用sudo开头的命令可能会提示让输入密码,如果有则输入当前用户的密码即可。


安装好nodejs后,可以通过命令测试是否安装成功nodejs:

node -v


最后,可以继续安装一些可选的全局包以方便后面使用:

# 安装nrm,并切换npm镜像源为淘宝
npm i -g nrm
nrm use taobao

# 安装nodemon
npm i -g nodemon

# 安装pm2(让node在后端运行的工具,这样可以在配置完毕之后关闭终端窗口)
npm i -g pm2

到此,nodejs环境安装完毕!

③安装nginx

Nginx是一款轻量级服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器,其特点是占有内存少,并发能力强,事实上nginx的并发能力在同类型的网页服务器中表现较好,中国大陆使用nginx网站用户有:百度、京东、新浪、网易、腾讯、淘宝等。

软件官网:https://nginx.org/

傻瓜式包管理工具安装方式说明参考地址:https://nginx.org/en/linux_packages.html#RHEL-CentOS


按照上述提示,在服务器上指定的位置/etc/yum.repos.d/nginx.repo新建一个文件,文件内容如下:

[nginx-stable]
name=nginx stable repo
baseurl=http://nginx.org/packages/centos/$releasever/$basearch/
gpgcheck=1
enabled=1
gpgkey=https://nginx.org/keys/nginx_signing.key
module_hotfixes=true

[nginx-mainline]
name=nginx mainline repo
baseurl=http://nginx.org/packages/mainline/centos/$releasever/$basearch/
gpgcheck=1
enabled=0
gpgkey=https://nginx.org/keys/nginx_signing.key
module_hotfixes=true

对于文件的创建和修改,可以考虑咋windows上进行,写完毕之后再通过文件传输工具,将文件上传到指定的位置即可。


随后运行nginx的安装命令:

sudo yum install -y nginx


在nginx完成安装后,可以通过以下几个命令来管理nginx服务:

# 启动nginx
systemctl start nginx

# 停止nginx
systemctl stop nginx

# 重启nginx
systemctl restart nginx

# 设置nginx开机自启动
systemctl enable nginx

# 设置nginx开机不自启动
systemctl disable nginx

接下来启动nginx:

systemctl start nginx

请注意,后续每次修改了nginx的配置文件都需要对nginx服务进行重启,否则新的配置不会生效。
nginx相关的目录位置:

  • 配置文件
  • 主配置文件nginx.conf:/etc/nginx/nginx.conf
  • 从配置文件‘*.conf’:可以是任意位置,以主配置文件声明为准,比较常用针对站点的从配置文件在/etc/nginx/conf.d/目录下
  • 默认站点目录
  • /usr/share/nginx/html(等于PHPstudy中的WWW目录,回头代码得放到这个里面去)

④域名解析(如果有域名的话

如果是大陆服务器使用,则域名一定要通过了ICP备案才可以

以阿里云为例,先进入域名控制台,在需要使用的域名后面点击解析按钮进入解析页面,随后点击添加记录按钮并按照自身需求填写解析信息:



设置完成后一般1分钟内即可生效,可以在本机windows上通过ping命令进行测试:

# 以刚才设置的域名为例(请替换成自己的域名)
ping sh2008.lynnn.cn


⑤项目代码部署

a. 将打包好的vue代码上传到Nginx默认的站点下,目录地址为/usr/share/nginx/html


b. 启动node服务端为项目提供数据访问服务

如果出现无法访问的情况,请注意防火墙与云安全组的设置。

上传node服务端的代码到远程服务器,位置可以随意(因为代码是node运行的,不是nginx):


接下来进入node代码的目录/usr/local/src/http,运行安装所需模块的指令:

npm install

此时即便运行了node服务器,也会出现无法访问的情况,需进入阿里云的控制台添加允许3000端口通过。


最后,让node在后台执行http.js文件(根据需要换成自己的文件名),此处需要用到前面安装的pm2工具:

# 先进入项目目录
pm2 start http.js

## 重启
pm2 restart http.js
## 停止
pm2 stop http.js

如果成功,则会看到如下效果:


c. 解决nginx下,路由模式history失效的问题

方案1:不使用history模式的路由

不使用istory模式,则得用hash模式,该模式下地址栏会有#

方案2:配置nginx,让nginx支持history模式的路由

try_files $uri $uri/ /index.html;

将上述的代码放到/etc/nginx/conf.d/default.conf

location / {
    root   /usr/share/nginx/html;
    index  index.html index.htm;
    # 以下是新增的一行
    try_files $uri $uri/ /index.html;
}

随后重启nginx:

systemctl restart nginx

重启之后新的配置将会生效,项目到这里也就可以通过域名或者ip地址进行访问了。

命令行打开 WebStorm 中的任意文件或文件夹,可选择指定打开后插入符号的位置。

WebStorm官方最新版免费下载试用,历史版本下载,在线文档和帮助文件下载-慧都网

Windows

可以在bin下的安装目录中找到运行 WebStorm 的可执行文件。要将此可执行文件用作命令行启动器,请按照命令行界面中的说明将其添加到您的PATH系统中。

句法

webstorm64.exe [--line <number>] [--column <number>] <path ...>

例子

打开一个项目:

webstorm64.exe C:\MyProject

打开第 42 行的特定文件:

webstorm64.exe --line 42 C:\MyProject\scripts\numbers.js

macOS

句法

webstorm --line <number> <path>

例子

打开一个项目:

webstorm ~/MyProject

打开第 42 行的特定文件:

webstorm --line 42 ~/MyProject/scripts/numbers.js

Linux

可以在bin下的安装目录中找到运行 WebStorm 的脚本。要将此脚本用作命令行启动器,请按照命令行界面中的说明将其添加到您的PATH系统中。

句法

webstorm.sh --line <number> <path>

例子

打开一个项目:

webstorm.sh ~/MyProject

打开第 42 行的特定文件:

webstorm.sh --line 42 ~/MyProject/scripts/numbers.js

当指定文件的路径时,前端开发工具WebStorm 会以LightEdit 模式打开它,除非它属于已经打开的项目或有特殊逻辑自动打开或创建项目(例如,在 Maven 或 Gradle 文件的情况下) 。 如果指定包含现有项目的目录,WebStorm 将打开此项目。如果打开一个不属于项目的目录,WebStorm 会将.idea目录添加到其中,使其成为一个项目。

以上就是有关在WebStorm从命令行打开文件的教程,更多关于WebStorm购买信息可进入慧都官网查看。

WebStorm已更新至V2022.1,欢迎下载WebStorm最新版本试用。

WebStorm官方最新版免费下载试用,历史版本下载,在线文档和帮助文件下载-慧都网

WebStorm是一个针对JavaScript和相关技术的集成开发环境。像其他JetBrains IDE一样,它使你的开发体验更加愉快,使日常工作自动化,并帮助你轻松处理复杂的任务。

今天我们一起来了解下HTML,

首先HTmL包含三层结构,分别是结构层,表现层,行为层。

结构层:html=> 网页上有什么,比如说文字啊、按钮啊、图片啊等等。

表现层:css=> 显示成什么样子,比如说文字的大小啊,位置啊,颜色啊等等。

行为层:JavaScript=> 具体怎么操作,比如说点击按钮让图片放大缩小等等。

===============================

在了解了html的三层结构之后,我们来学习如何写html。html不是编程语言,它是一套标签。最简单的html文本是下图1这个样子。我们可以在电脑桌面上新建一个记事本文件,然后把后缀名改一下(.txt=>.html),把这段标签代码粘贴到html文件里,这样一个空白的网页就做成了。如果需要在网页上添加内容,我们只需要在第10行的位置添加各种各样的标签即可。比如我在图二添加了一个按钮标签和一段文字标签,双击html文件,页面上就从左到右,从上到下显示对应的内容。是不是很简单。我们日常浏览的网页都是这样一个标签一个标签画上去的。

我给大家总结了一张图,基本上覆盖了工作中常用的知识点。同时分享几个小技巧。

1.最简单的网页写成什么样子,也就是html模板不需要记忆,下图也说了,去百度下载一个VSCode软件(类似于记事本,是现在主流的前端代码编辑器),用它打开我们的html文件,输入英文叹号回车就自动生成了,学编程不要死记硬背。

2.控件的标签不需要记忆,直接百度html XXX标签,例如:百度搜“html按钮标签”,他就会告诉我们是<button>,用的时间长了自然就记住了。是不是省力。

3.标签的属性很重要,可以不去记他的写法,因为写可以百度,重要的是你需要记住标签有什么属性,下图的属性记住足矣。为什么要记呢,因为工作中,有的时候会遇到这样一种情况,明明设置一个属性可以完成的功能,我们不知道,花费了大力气用css和js去实现,结果还存在着特定场合的bug,让人很无奈。

4.对于html还有两个标签<canvas>和<svg>,他们是用来绘图的,做特殊效果的。我们可以先跳过,等框架啥的都学完了,有兴趣,学习一下。

5.给大家推荐一个小白学习html的网站,w3cschool,图里不明白的可以去上边学学练练。

6.如果觉得一个人学习前端有难度,我建了一个小白前端学习交流群,可以私聊我,大家在群里多多交流,我会经常给大家答疑,组织大家练习,一起做小项目。有方向,少走弯路。