前端代码部署到服务器

1、webpack打包后的代码，如何部署到服务器上

本文章前端代码是基于vue+webpack开发的

Nginx是一款轻量级的Web 服务器/反向代理服务器

首先，webpack配置如下

在开发过程中，我们是通过npm run dev在开发环境中运行代码
如果要部署到生产环境中，可以运行npm run build进行上线打包

打包完成后，会发现项目中多了dist这个文件夹

执行结果和webpack的配置文件一致。

代码被webpack打包完成后下一步就是部署到服务器上，此文仅适合于前端代码是部署在windows操作系统的nginx服务中。
这里假设：
Windows操作系统：windows server 2008 64位
Nginx服务：nginx-1.12.2 64位

1.下载nginx-1.12.2 64位解压，假设nginx-1.12.2放在D:nginx-1.12.2目录中，nginx目录结构。如图下

2、前端代码放在D:nginx-1.12.2html目录中，dist目录就是刚刚前端打包完的代码。如图下

3、在D:nginx-1.12.2conf目录中，有个nginx.conf配置文件，进行编辑这个文件

4、假设前端的端口号为8082，如果端口号被占用，请修改为其它端口号。后台服务访问地址http://192.168.121.**:8080,

5、打开cmd控制台，进入目录D:nginx-1.12.2中，用start nginx命令启动服务，然后用tasklist /fi "imagename eq nginx.exe"，查看nginx服务是否启动。

4、如果改变配置文件时，需要用nginx -s reload 命令重启nginx工作进程。

5、关闭服务
nginx -s stop 
nginx -s quit 安全关闭 
taskkill /F /IM nginx.exe > nul 关闭所有nginx服务

2、web前端代码 小白求教，web前端开发的代码，是运行在哪里，是在web服务器上运行吗？还是运行在浏览器端？

运行在浏览器端，如果只是HTML5和js，直接在浏览器可以。
如果有后台代码，就得需要web服务器，目前主流的是Tomcat服务器。

3、纯html项目需要单独部署到服务器吗？

不管什么样的页面，哪怕只有一个字，想要大家访问，都必须放到服务器上，比如你服务器用的nginx,页面放到服务器上，然后在nginx配置文件中指想文件所在目录，就可以访问了

4、前端通过gulp编译后的文件，怎么部署到服务器

服务器上写部署脚本，从代码库里拉项目代码，跑gulp自动化。或者打包传给后端让他搞。

5、如何把做好的前端网页上传到服务器上，让别人可以像浏览百度、新浪等各大网页一样可以访问得到

= =。首先你要有一个公网IP的服务器(重要，否别人无法直接在网址上访问你的页面)

linux 是服务器，用来24开机提供服务。
apache是引擎，用来提供别人访问你的网址能有东西出来。
ftp用来把你写的代码上传到linux上面去，有了这一步你的东西才能在服务器上被别人访问到。
只要远程目录上有你的东西就是上传成功了，端口默认是21
或者你可以上网买一些虚拟主机，有二级域名可以穿透，也可以外网访问

6、怎么把VUE项目部署到服务器上面

1.使用xshell登录到阿里云服务器。安装nginx（本文安装到/etc下）

[plain] view plain copy

cd /etc  

apt-get update  

apt-get install nginx  

2.首先先配置nginx，然后再根据配置文件做下一步操作

打开/etc/nginx/nginx.conf文件

[plain] view plain copy

vim /etc/nginx/nginx.conf  

在nginx.conf中配置如下：

[plain] view plain copy

user www-data;  

worker_processes auto;  

pid /run/nginx.pid;  

events {  

        worker_connections 768;  

        # multi_accept on;  

}  

http {  

        ##  

        # Basic Settings  

        ##  

        tcp_nodelay on;  

        keepalive_timeout 65;  

        types_hash_max_size 2048;  

        # server_tokens off;  

        # server_names_hash_bucket_size 64;  

        # server_name_in_redirect off;  

        include /etc/nginx/mime.types;  

        default_type application/octet-stream;  

        ##  

        # SSL Settings  

        ##  

        ssl_protocols TLSv1 TLSv1.1 TLSv1.2; # Dropping SSLv3, ref: POODLE  

        ssl_prefer_server_ciphers on;  

        ##  

        # Logging Settings  

        ##  

        access_log /var/log/nginx/access.log;  

        error_log /var/log/nginx/error.log;  

        ##  

        # Gzip Settings  

        ##  

        gzip on;  

        gzip_disable "msie6";  

        # gzip_vary on;  

        # gzip_proxied any;  

        # gzip_comp_level 6;  

        # gzip_buffers 16 8k;  

        # gzip_http_version 1.1;  

        ##  

        # Virtual Host Configs  

        ##  

        gzip on;  

        gzip_disable "msie6";  

        # gzip_vary on;  

        # gzip_proxied any;  

        # gzip_comp_level 6;  

        # gzip_buffers 16 8k;  

        # gzip_http_version 1.1;  

        # gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;  

        ##  

        # Virtual Host Configs  

        ##  

        include /etc/nginx/conf.d/*.conf;  

        include /etc/nginx/sites-enabled/*;  

        #以下为我们添加的内容  

       server {               

              listen 80;  

              server_name your-ipaddress;  

              root /home/my-project/;  

              index index.html;  

              location /datas {  

              rewrite ^.+datas/?(.*)$ /$1 break;  

              include uwsgi_params;  

              proxy_pass http://ip:port;  

                              }  

             }  

}  

接下来就根据配置文件进行下一步工作。配置文件中的server_name后面是阿里云服务器的ip地址

3.配置文件中的listen是nginx监听的端口号，所以需要在阿里云服务器上为80端口添加安全组规则

在本地的浏览器登录阿里云服务器->进入控制台->点击安全组->点击配置规则->点击添加安全组规则，之后配置如下（注：入方向和出方向都要配置）

4.配置文件中的root和index那两行表示我们把项目文件夹放在/home/my-project下

例如有两个项目文件夹分别为test1，test2，里面都有index.html。则目录结构如下

/home

     |--my-project

            |--test1

                    |--index.html

            |--test2

                    |--index.html

则在浏览器输入http://ip/test1/index.html

服务器便会在/home/my-project中找到test1下的index.html执行；

如果在浏览器中输入http://ip/test2/index.html

服务器便会在/home/my-project中找到test2下的index.html执行；

这样便可以在服务器下放多个项目文件夹。

5.所以我们也需要在本地项目的config/index.js里的build下进行修改,如果要把项目放到test1下，则

[javascript] view plain copy

assetsPublicPath: '/test1/',  

如果用到了vue-router，则修改/router/index.js

[javascript] view plain copy

export default new Router({  

  base: '/test1/',   //添加这行  

  linkActiveClass: 'active',  

  routes  

});  

6.nginx配置文件中的location则是针对跨域处理，表示把对/datas的请求转发给http://ip:port,本文中这个http://ip:port下就是需要的数据，例如http://ip:port/seller,在本地项目文件中ajax请求数据的地方如下

[javascript] view plain copy

const url = '/datas/seller';  

this.$http.get(url).then((response) => {  

  .....  

});  

7.修改后在本地命令行下运行:cnpm run build 生成dist文件。把dist文件里的index.html和static文件上传到服务器的/home/my-project/test1下，目录结构如下

/home

     |--my-project

            |--test1

                    |--index.html

                    |--static

8.启动nginx

[plain] view plain copy

service nginx start  

9.至此项目部署成功，在浏览器下输入:http://ip/test1/index.html即可

7、为什么我的前端代码 改了 部署到服务器 上 微信上没有改变

每天早上起床都要看一遍“福布斯”富翁排行榜，如果上面没有我的名字，我就去上班……

8、如何把本地项目部署到服务器上

把本地项目部署到服务器上方法比较多，这里以javaee项目为例：

把项目打包成zip，FTP上传到生产服务器tomcat的webapps目录下解压；

本地修改好的文件，立即FTP上传到生产服务器对应的目录；

生产服务器安装svn服务，在本地把修改过的文件commit，然后生产服务器update。

方式一、简单直接，但是缺点也很明显：项目太大上传太慢，比如改了一个错别字就要把整个项目打包上传。

方法二、只上传修改了的文件，但是有时候改到一半，可能会忘了上传，长此以往本地和生产服务器文件的同步就很麻烦了。

方法三、好处是每次部署和改动，都有svn记录，即使误删文件也不怕了。

9、怎么把 html 网页发布在阿里云服务器上

我们把网站部署到服务器的时候，首先把域名解析到服务器，也就是解析到对应的IP地址，然后要弄清楚服务器是ESC还是虚拟主机，如果是虚拟主机，那我们就不用配置环境，可以直接上传代码到对应的目录就好，设置一下默认主页，这个在阿里云官网的控制台可以进行管理。如果是ESC的话，我们就需要根据服务器的操作系统进行环境配置，就跟我们本地配置是一样的操作，然后把代码上传到配置的目录就好。希望能帮到你

10、已经写好了HTML格式的前端文件，想要部署到阿里云虚拟主机。

ip未绑定网站目录
虚拟主机一般都会附属 二级域名 通过域名访问